php - 根据名称中的文本更改切片的颜色

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 等。、BAD A、BAD B、BAD C 等。 和 其他1、其他2、其他3等.

我想要实现的是，当名称中包含“GOOD”文本时，切片应为绿色阴影，而“BAD”-> 红色阴影。其他切片应该是默认的。

通过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"
        }
    }

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

其他很酷的事情要做的是获得绿色、红色和其他非红色或绿色的颜色的调色板。然后，当您返回颜色时，您需要让它在该字符串标题匹配的可用色调列表中循环。这样，根据值的好坏，您就不会得到完全相同的结果。对于“其他”，您可以使用蓝色/黄色调色板。再次从列表中选择一个，并且仅当您的切片数量多于列表中的颜色时才重复。