Question

我在我的页面中使用Highchart，我想知道我是否可以使饼图更具动态性。我想在名称中出现特定文字的切片为绿色阴影。

一些代码：

plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.y;
                            }
                        },
                        showInLegend: true
                    }
                },
              colors:['#89ABD5','#3b73b9','#22436b','#08a5e1',
                ],
                series: [{
                  color:'#89ABD5',
                    type: 'pie',
                    name: '',
                    data: []
                },
                {
                  color:'#3b73b9',
                    type: 'pie',
                    name: '',
                    data: []
                },
                {
                  color:'#22436b',
                    type: 'pie',
                    name: '',
                    data: []
                },
                {
                  color:'#08a5e1',
                    type: 'pie',
                    name: '',
                    data: []
                },
                ]

我的名字有：GOOD A, GOOD B, GOOD C, etc..，BAD A, BAD B, BAD C, etc..和OTHER1, OTHER2, OTHER3, etc..

我想要实现的是，当名称中有文本GOOD时，切片应该是绿色阴影，而BAD - ＆gt;红色的色调。其他切片应默认使用。

数据通过getJSON获得。

Answer 1

此答案取决于您如何生成要添加到图表的系列数据。为什么不在系列构建器中添加一些逻辑来根据字符串中的文本更改颜色？这是一些伪代码：

//looping through your data elements that you want to be slices.
    var sliceTitle;
    var sliceColor;
    var sliceData = [];

    sliceTitle = anElement[i].name;
    sliceColor = getColorMatch(sliceTitle);
    sliceData = anElement[i].dataStuff;

    series[i].name = sliceTitle;
    series[i].color = sliceColor;
    series[i].data = sliceData;
//continue loop.
    ...
    function getColorMatch(titleText) {
        if (titleText.indexOf("GOOD") !== -1) {
            return "#somegreencolor"
        }
        if (titleText.indexOf("BAD") !== -1) {
            return "#someredcolor"
        }
        if (titleText.indexOf("OTHER") !== -1) {
            return "#someOthercolor"
        }
    }

请注意，这假设您没有标题包含两个字符串且区分大小写的情况。

要做的其他很酷的事情是获得绿色，红色和其他颜色不是红色或绿色的调色板。然后，当您返回颜色时，您需要让它循环显示该字符串标题匹配的可用色调列表。这样你就不会得到所有相同的取决于价值的差/好。对于“其他”，您可以使用蓝调/黄色调色板。再次，从列表中选择一个，只有在列表中有更多切片时才重复。

更改切片的颜色取决于名称中的文本

1 个答案: