0

jqplot を使用して円グラフとドーナツ グラフを描画しています。そして、「seriesColors」を使用して、スライスにカスタマイズされた色を付けています http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.seriesColors

シリーズカラー : [ "0571B0", "#5E3C99", "#008837"]

データ (渡される配列値) に値が 3 つしかない場合、色は適切に表示されます。ただし、値が 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]];

次に、4 番目のスライス ('d') が黒色で表示されます。

これを修正するにはどうすればよいですか?

4

1 に答える 1

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
                }
});
于 2012-12-21T07:28:22.757 に答える