我试图侵入 FusionCharts 对象来独立于基本的“paletteColors”对象来控制每个数据元素的颜色。
我需要修改它,以便例如所有带有标签“New”的项目获得相同的颜色(例如红色)。所有带有“完整”标签的项目都会获得特定的颜色(例如灰色)。
因此,我可以有多个图表,每个图表都有不同的数据(一个图表可能有“新”和“完整”数据标签,另一个图表可能有“资金”和“错误”标签),但每个图表的颜色值都是不同的跨多个图表的数据点。
$.each(jsonDataPoints, function (index, obj) {
var hoverText = obj.label + " (" + obj.value + ")";
obj.toolText = hoverText; //This sets the text to display when a pie chart is hovered.
obj.displayValue = hoverText; //This sets the chart labels.
if (obj.label = "New") {
obj.color = "#ff0000";
}
else if(obj.label = "Complete") {
obj.color = "#cccccc";
}
else if(obj.label = "Funding") {
obj.color = "#888888";
}
else{
obj.color = "#000000";
}
});
var pieChart = new FusionCharts({
type: 'pie2D',
renderAt: containerId,
registerWithJS: '1',
dataFormat: 'json',
dataSource: {
"chart": {
"enableRotation": "0",
"animation": "1",
"showToolTip": "1",
"showPercentInTooltip": "0",
"showBorder": "0",
"showLegend": "0",
"decimals": "1",
"formatNumber": "1",
"formatNumberScale": "0",
"inthousandSeparator": ",",
"indecimalSeparator": ".",
"enableSmartLabels": "1",
"height": "100%",
"width": "100%",
"bgColor": "#FFFFFF",
//"paletteColors": "E58403,60CA9E,8F5097,569C3F,2D6CA2,5B6770,8F6A2A,5F407A,872B4B,572C5F,244C5A",
"chartBottomMargin": "5",
"chartTopMargin": "5",
"showPlotBorder": "1",
"plotBorderColor": "#FFFFFF",
"plotBorderThickness": "1",
"startingAngle": "90"
},
"data": jsonDataPoints
}
});
pieChart.render();
换句话说,我不希望“资金”与“新”具有相同的图表颜色。我希望“资金”始终为相同的颜色,无论它出现在哪个图表中(我有一个包含 3-4 个图表的仪表板)
我使用下面的代码是否走在正确的轨道上?显然我错过了一些东西,因为它不起作用(所有值都是红色的,与“新”标签相同。新应该是红色,但每个后续数据点应该有自己的唯一颜色,如我的 if/else 代码中指定的那样下面的分支)
您还可以指定逗号分隔的颜色列表以用于不同的数据系列。对于每个数据系列,颜色都是从列表中以循环方式选择的。
{
"chart": {
"palettecolors": "5d62b5,29c3be,f2726f"
}
}
要了解更多信息,请参阅 - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-plot#color- different-data-plots
参考演示小提琴 - https://jsfiddle.net/c24e59hm/3/