Jqplot 원형/도넛 형 차트 계열 색 배열 다시 사용/반복되지 않음

Question

jqplot을 사용하여 원형 차트와 도넛 형 차트를 그립니다. 는 그리고 난 'seriesColors'는 슬라이스 http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.seriesColors

seriesColors 맞춤형 색상을 수득 사용하고 : [ "0571B0", "#의 5E3C99", "# 008837"]

데이터 경우 (배열 값을 전달 된) 값이 3 개인 경우 색상을 올바르게 표시합니다. 그러나 값이 4 개 이상이면 그 조각을 검은 색으로 표시합니다. 처음부터 색상을 반복/재사용하지 않습니다 (문서에서 말한 것처럼).

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]]; 

를 4 조각 ('D')을 상기 배열을 수정할 경우 즉 검은 색으로 표시된다.

어떻게 수정합니까?

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