2012-12-21 20 views
0

我正在使用jqplot繪製餅圖和圓環圖。 ,我使用的 'seriesColors',得到定製顏色切片http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.seriesColorsJqplot派/圓環圖系列顏色數組不能重用/重複

seriesColors:[ 「0571B0」, 「#5E3C99」, 「#008837」]

如果數據(數組值來通過)只有三個值,那麼它會正確顯示顏色。 但是,如果有超過3個值,它只會以黑色顯示該切片。 它不會重複/重新使用顏色(如文檔中所述)。

這就是:

var s2 = [['a', 8], ['b', 12], ['c', 6]]; 
var plot1 = $.jqplot('div_1', [s2], { 
       title: 'Chart 1', 

       seriesDefaults:{ 
        renderer:$.jqplot.DonutRenderer , 
        rendererOptions:{ 
         startAngle: -90, 
         innerDiameter: 100, 
         showDataLabels: true, 
         dataLabels:'percent' 
        } 
        }, 
        seriesColors: ["#0571B0", "#5E3C99", "#008837"], 
        highlighter: { 
         show: true 
        }, 
        legend: { show:true, rendererOptions: {numberRows: 1}, location: 's', placement: 'outsideGrid'} 
       }); 

但是,如果我在陣列中添加第4個值,顏色都不要再用。如果我修改上面的陣列

var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]]; 

然後,第四切片(「d」) 即顯示爲黑色的顏色。

我該如何解決這個問題?

回答

1

找到了解決辦法。 希望這可以幫助那些面臨類似問題的人。

這是代碼。

var dataValues = [['a', 8], ['b', 12], ['c', 6], ['d', 9], ['e', 14]]; 

//Define the seriesColors array.. 
var seriesColors = ["#0571B0", "#5E3C99", "#008837"]; 

var seriesColorsLength = seriesColors.length; 
var donutChartSeriesColors = new Array(); 

//Prepare a new array which would be passe to the chart.. 
//This will handle even if there are more value than the seriesColors array.. 
for(var i = 0; i < dataValues.length; i++) { 
donutChartSeriesColors[i] = seriesColors[(seriesColorsLength-1) % i]; 
} 

var plot1 = $.jqplot('div_1', [dataValues ], { 
      title: 'Chart 1', 

      seriesDefaults:{ 
       renderer:$.jqplot.DonutRenderer , 
       rendererOptions:{ 
        startAngle: -90, 
        innerDiameter: 100, 
        showDataLabels: true, 
        dataLabels:'percent' 
       } 
       }, 
       seriesColors: donutChartSeries, 
       highlighter: { 
        show: true 
       } 
});