条形图颜色基于c3.js中的值

时间:2016-06-15 18:51:03

标签: javascript html d3.js graph c3.js

我在c3.js (here's a fiddle)中有以下条形图:

nodetool repair

这会将所有条形设置为红色。我想要的是从FF0000到10FF00的条形颜色this gradient,我相信这只是在颜色的十进制值中加4096的增量。

我希望渐变从50开始到100结束(也就是说,绿色和下面的任何东西都是纯红色的FF0000,而100则是绿色的10FF00)。

我试图跟随this example根据其值设置c3.js图表​​上数据点的颜色。在该示例中,var chart = c3.generate({ data: { x: 'Letter', columns: [ ['Letter', 'A','B','C','D'], ['value', 25,50,75,100] ], type: 'bar', colors: { value: '#FF0000' }, }, axis: { x: { type: 'category' } }, legend: { show: false } }); 的值随着其值的增加而变暗。我一直在尝试修改data3,但我似乎无法做任何我想要的事情。

任何帮助将不胜感激。谢谢!

2 个答案:

答案 0 :(得分:2)

我不确定你在color: function内做了什么,但这是设置它的正确方法。关于所需的渐变,仅通过增加其十六进制值无法实现,因为从黄色变为绿色需要降低该值。以下示例从红色变为黄色:

var chart = c3.generate({
  data: {
    x: 'Letter',
    columns:
    [
      ['Letter', 'A','B','C','D'],
      ['value', 25,50,75,100]
    ],
    type: 'bar',
    colors: {
      value: function(d) {
        return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
      }
    },
  },
  axis: {
    x: {
      type: 'category
    }
  },
  legend: {
    show: false
  }
});

fiddle

答案 1 :(得分:0)

你可以像

一样添加你的CSS
.c3-bar-0 {
   fill:rgb(204, 0, 102)!important;
}
.c3-bar-1 {
   fill:rgb(51, 153, 255)!important;
}
.c3-bar-2 {
   fill: rgb(0, 255, 204)!important;
}