gpt4 book ai didi

colors - Jqplot 饼图/ donut chart seriesColors 数组未重用/重复

转载 作者:行者123 更新时间:2023-12-04 16:12:30 24 4
gpt4 key购买 nike

我正在使用 jqplot 绘制饼图和圆环图。
我正在使用“系列颜色”为切片提供自定义颜色 http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.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'}
});

但是,如果我在数组中添加第四个值,则不会重用颜色。
即如果我将上面的数组修改为
var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]];

然后第 4 个切片 ('d') 以黑色显示。

我该如何解决?

最佳答案

找到了解决此问题的方法。
希望这可以帮助其他面临类似问题的人。

这是代码。

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

关于colors - Jqplot 饼图/ donut chart seriesColors 数组未重用/重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13984712/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com