Question

我遇到麻烦配置C3Chartjs，希望有人可以帮助我。

这里是我的JSON（数据来自用户输入）：

select ... from my_table where my:date_field between concat(YEAR(CURRENT_DATE()),'-',MONTH(CURRENT_DATE()),'-01')
and adddate(concat(YEAR(CURRENT_DATE()),'-',MONTH(CURRENT_DATE()),'-01'), interval 1 month);

这是我的C3配置：

  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 }
  ]

这是此代码的结果：

Actual Result

问题在于需要操作组中的数据，如下所示：

The Result I expect

如果有人更喜欢在＆＃34; production＆＃34;中看到该应用，您可以访问：

// 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']
      ]
    }
  })

C3js图表 - JSON组数据

1 个答案: