如何为每列设置单独的柱状图颜色？

我在Dojo 1.4中生成了一个柱状图，我想根据它代表的与阈值相关的值对各个列着色。例如，如果列的值是5或更少，它应该是绿色填充。如果它是10或更多，它应该是红色填充。如何为每列设置单独的柱状图颜色？

我可以使颜色在系列级别上工作，但我希望同一系列中的各个数据点具有此可变颜色方案。这可以做到吗？有没有更好的方法来解决问题？

这里是迄今为止我的应用程序生成的代码：

var chart1 = new dojox.charting.Chart2D("simplechart"); 
chart1.addPlot("default", {type: "Columns", gap:5}); 
chart1.addPlot("target", {type: "Lines"}); 
chart1.addAxis("x", 
    {labels: [{value: 1, text: "Aug '12"}, 
    {value: 2, text: "Sep '12"}, 
    {value: 3, text: "Oct '12"}, 
    {value: 4, text: "Nov '12"}, 
    {value: 5, text: "Dec '12"}, 
    {value: 6, text: "Jan '13"}], 
    minorTicks:false}); 
chart1.addAxis("y", {vertical: true, min: 0, max: 9}); 
chart1.addSeries("Data Series", [6.9,7.7,1,5.5,7.6,8.1]); 
chart1.addSeries("Target Series", [6,6,6,6,6,6], {plot:"target"}); 

chart1.render();

我想“数据系列”中的个别点有可变颜色值。

来源

2013-02-27 huntmaster

这将有助于您发布一些示例代码。 – 2013-02-27 16:53:48

刚刚添加了代码示例以提供上下文。 – huntmaster 2013-02-27 17:21:06

您可以使用“StackedColumns”执行此操作。这个想法是你可以为每种颜色创建一个系列。例如，值为< = 5的“绿色”系列，其他值> 5和< = 10的“绿色”系列，值> 10时为“红色”系列。

然后，你必须评估你有数据数组中的每个值，并把该值在相应的意甲，像这样：

for(var i=0; i<chartData.length;i++){ 
     if(chartData[i]<=5) 
      fill("green",chartData[i]); 
     else if(chartData[i]>5 && chartData[i]<=10) 
      fill("yellow",chartData[i]); 
     else 
      fill("red",chartData[i]); 
    }

看到这个jsfiddle看到例如使用道场运行

来源

2013-04-23 18:20:57 Noelia

完美解决了这个问题，非常感谢jsfiddle演示！ – huntmaster 2013-04-23 19:22:09

非常欢迎您！ – Noelia 2013-04-24 17:56:18

如何为每列设置单独的柱状图颜色？

回答

相关问题