javascript - C3.js Line Graph Colors From URL - Stack Overflow

admin管理员组

文章数量:1341878

So I am having troubles trying to change the colors of my line graph that is generated from JSON from a URL. Here is my code to generate the chart:

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'
  }
});

And here is my JSON format:

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

For some reason the color does not change at all for Line1 with the colors attribute set. So I was wondering if anyone knew how to change the colors to a url generated c3 graph.

Thankyou.

So I am having troubles trying to change the colors of my line graph that is generated from JSON from a URL. Here is my code to generate the chart:

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'
  }
});

And here is my JSON format:

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

For some reason the color does not change at all for Line1 with the colors attribute set. So I was wondering if anyone knew how to change the colors to a url generated c3 graph.

Thankyou.

• javascript
• json
• c3.js

Share Follow edited Sep 23, 2014 at 20:17 Lars Kotthoff 109k1616 gold badges210210 silver badges208208 bronze badges asked Sep 23, 2014 at 20:09 user3756760user3756760 18111 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I figured out the answer to my own question so I thought that I would post it here.

I had to add:

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

Instead of:

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

The colors param should be inside the data object, like:

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

本文标签： javascriptC3js Line Graph Colors From URLStack Overflow