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

【问题标题】：Bar graph colors based on value in c3.js基于 c3.js 中值的条形图颜色
【发布时间】：2016-10-17 01:08:58
【问题描述】：

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

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

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

我希望渐变从 50 开始，到 100 结束（也就是说，绿色及以下的任何东西都将是纯红色 FF0000，而 100 将是绿色 10FF00）。

我试图关注this example，根据其值在 c3.js 图表上设置数据点的颜色。在示例中，data3 的值随着其值的上升而变暗。我一直在尝试修改color: function (color, d)，但我似乎无法让它做任何我想做的事情。

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

【问题讨论】：

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

【解决方案1】：

我不确定您在 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

【讨论】：

这可以用 type: 'donut' 吗？我注意到 d 返回一个带有甜甜圈而不是对象的十六进制值

【解决方案2】：

你可以像一个

一样添加你的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;
}

【讨论】：