Question

所以我在尝试更改从URL中生成的JSON的线图颜色时遇到了麻烦。这是我生成图表的代码：

var chart = c3.generate({
  bindto: '#chart',
  data: {
      url: '../URL.JSON',
      mimeType: 'json',
      keys: {
          x: 'Date',
          value: ["Line1", "Line2", "Line3", "Line4"]
      },
      type: 'line'
  },
  axis: {
      x: {
          type: 'category'
      }
  },
  size: {
      height: 500
  },
  colors: {
      'Line1': '#ff0000'
  }
});

这是我的JSON格式：

[
    {'Date': '9/23/2014', 'Line1': 12, 'Line2': 54, 'Line3': 23, 'Line4': 5},
    {'Date': '9/22/2014', 'Line1': 56, 'Line2': 18, 'Line3': 25, 'Line4': 0}
]

由于某种原因，对于具有颜色属性设置的Line1，颜色根本不会改变。所以我想知道是否有人知道如何将颜色更改为url生成的c3图。

三江源。

Answer 1

我找到了自己问题的答案，所以我想我会在这里发布。

我不得不补充道：

color: {
    pattern: ['#363FBC', '#363FBC', '#B73540', '#B73540']
}

而不是：

colors: {
  'Line1': '#ff0000'
}

Answer 2

colors参数应位于data对象内，例如：

data: {
    columns: [
        ['data1', 30, 20, 50, 40, 60, 50],
        ['data2', 200, 130, 90, 240, 130, 220],
        ['data3', 300, 200, 160, 400, 250, 250]
    ],
    type: 'bar',
    colors: {
        data1: '#ff0000',
        data2: '#00ff00',
        data3: '#0000ff'
    }
}

来自URL的C3.js线图颜色

2 个答案: