javascript - 使用 HighChart 绘制不同事物数据的饼图

Question

我正在使用HichChart的饼图，用于显示有关不同学生的报告的数据 - 该图表分为几个部分:

• 积极的数据。
• 负面数据。

我已经让它对单个学生完美地工作，但是当我在某人的积极区域内然后我点击另一个学生时就会出现问题 - 饼图使用积极的一面的颜色(我不记得告诉过来做到这一点)。主要问题是，当我处于钻孔阶段时，我必须返回，否则它会加载具有不同颜色的不同数据。

这是我的代码:

<div id="ChartContainer" style="width: 600px; height: 400px; margin: 0 auto"></div>

$(function(){
    HighCharts.chart('ChartContainer', {
        chat: {
            type: 'pie'
        },
        title: {
            text: 'Positive: 426 / Need Work: 28'
        },
        plotOptions: {
            pie: {
                size: 250,
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage + '%';
                    }
                }
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.percentage + '%';
            }
        },
        series: [{
            data: [{
                name: 'Positive',
                y: 4,
                color:'#00ff00',
                drilldown: 'Posit'
            }, {
                name: 'Negative',
                y: 4,
                color: '#ff7a0f',
                drilldown: 'Negit'
            }, ]
        }],
        drilldown: {
            series: [{
                color: 'green',
                id: 'Posit',
                data: [
                    {name:'one', y:4, color: 'Red'},
                    ['two', 2],
                    ['three', 1],
                    ['four', 2],
                    ['five', 1]
                ]

            }, {
                 color: 'Blue',
                id: 'Negit',
                data: [
                    {name:'one', y:4, color: 'Blue'},
                    ['Seven', 4],
                    ['Eight', 2],
                    ['Nine', 3]
                ]

            }

           ]
        }
    });
});

Answer 1

您忘记包含 https://code.highcharts.com/modules/drilldown.js在脚本标签中。它应该在index.html中引用。您的值将转换为百分比。这就是它显示不同的值。