Fusioncharts 基于对象属性自定义颜色

问题描述 投票:0回答:1

我试图侵入 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 代码中指定的那样下面的分支)

jquery fusioncharts
1个回答
0
投票

您还可以指定逗号分隔的颜色列表以用于不同的数据系列。对于每个数据系列,颜色都是从列表中以循环方式选择的。

{
   "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/

© www.soinside.com 2019 - 2024. All rights reserved.