javascript - C3js 图表 - JSON 组数据

Question

我在配置 C3Chartjs 时遇到问题，希望有人可以帮助我。

这是我的 JSON(从用户输入获取的数据):

  obc: [
    { takt: 90, oee: 80, processId: 'Operation 1', processName: 'Cortar', lowRepCycle: 65 },
    { takt: 90, oee: 80, processId: 'Operation 1', processName: 'Dobrar', lowRepCycle: 35 },
    { takt: 90, oee: 80, processId: 'Operation 2', processName: 'Dobrar', lowRepCycle: 65 },
    { takt: 90, oee: 80, processId: 'Operation 2', processName: 'Dobrar', lowRepCycle: 35 }
  ]

这是我的 C3 配置:

  c3.generate({
    bindto: '#chart',
    data: {
      json: this.obc,
      keys: {
        value: ['lowRepCycle', 'takt', 'oee']
      },
      type: 'bar',
      types: {
        takt: 'line',
        oee: 'line'
      },
      groups: [
        ['processId']
      ]
    }
  })

这是这段代码的结果:

Actual Result

问题是需要操作组中的数据，如下所示:

The Result I expect

<小时/>

如果有人喜欢在“生产”中查看应用程序，您可以访问:

//jsfiddle.net/theuzz1/3pa07ah8/

matheus-lean.herokuapp.com/#/obc

只需单击“添加运算符”即可查看图表

Answer 1

这不起作用，因为您无法对值进行分组。您只能对列进行分组，例如'takt' 和 'oee'，那么两者将堆叠而不是单独显示。

要获得所需的结果，您必须操作 json。每个条目都是一个具有一定数量任务的操作。然后您可以对任务进行分组。

它看起来像这样(fiddle):

 var obc = [
    { takt: 90, oee: 80, processId: 'Operation_1', processName: 'Cortar', task_1: 65, task_2: 35 },
    { takt: 90, oee: 80, processId: 'Operation_2', processName: 'Dobrar', task_1: 65, task_2: 35 }
  ]

var chart =  c3.generate({
    data: {
      json: obc,
      keys: {
        value: ['task_1','task_2','takt', 'oee']
      },
      type: 'bar',
      types: {
        takt: 'line',
        oee: 'line'
      },
      groups: [
        ['task_1', 'task_2']
      ]
    }
  })