如何爲每列設置單獨的柱狀圖顏色？

我在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

如何爲每列設置單獨的柱狀圖顏色？

回答

相關問題