在highcharts上的堆叠钻取图表中缺少datalabel值

时间:2017-11-21 11:22:06

标签: highcharts highstock

我在堆叠钻取图表数据标签中遇到了问题。数据标签显示正常,但是当我点击特定列时,向下钻取工作正常,当我回到第一级时,数据标签没有显示以前单击的列点剩余列数据标签显示为is.can任何人帮助吗?



Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                    var chart = this,
                        drilldowns = {
                            'Oct-17': {
                                name: "Oct-17",
                                color: "blue",
                                data: [
                                    ["Andrew", 87],
                                    ["Nicholas", 147],
                                    ["Rajesh", 71],
                                    ["sandeep", 59],
                                    ["smith", 185],
                                    ["sunitha", 138]
                                ]
                            },
                            'Nov-17': {
                                name: "Nov-17",
                                color: "blue",
                                data: [
                                    ["Andrew", 4],
                                    ["Rajesh", 3],
                                    ["smith", 23]
                                ]
                            }
                        },
                        drilldowns2 = {
                            'Oct-17': {
                                name: "Oct-17",
                                color: "Orange",
                                data: [
                                    ["Andrew", 0],
                                    ["Nicholas", 41],
                                    ["Rajesh", 19],
                                    ["sandeep", 30],
                                    ["smith", 54],
                                    ["sunitha", 11]
                                ]
                            },
                            'Nov-17': {
                                name: "Nov-17",
                                color: "Orange",
                                data: [
                                    ["Andrew", 0],
                                    ["Rajesh", 0],
                                    ["smith", 18]
                                ]
                            }
                        },
                        drilldowns3 = {
                            'Oct-17': {
                                name: "Oct-17",
                                color: "green",
                                data: [
                                    ["Andrew", -87],
                                    ["Nicholas", -106],
                                    ["Rajesh", -52],
                                    ["sandeep", -29],
                                    ["smith", -131],
                                    ["sunitha", -127]
                                ]
                            },
                            'Nov-17': {
                                name: "Nov-17",
                                color: "green",
                                data: [
                                    ["Andrew", -4],
                                    ["Rajesh", -3],
                                    ["smith", -5]
                                ]
                            }
                        },
                        series = drilldowns[e.point.name],
                        series2 = drilldowns2[e.point.name];
                    series3 = drilldowns3[e.point.name];
                    chart.addSingleSeriesAsDrilldown(e.point, series);
                    chart.addSingleSeriesAsDrilldown(e.point, series2);
                    chart.addSingleSeriesAsDrilldown(e.point, series3);
                    chart.applyDrilldown();
                }
            }
        }
    },

    title: {
        text: 'Async drilldown'
    },
    xAxis: {
        type: 'category'
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {stacking: 'normal'},
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                style: {textShadow: false, fontSize: '2vw'}
            }
        }
    },

    series: [{
        name: "PlannedHours",
        color: "blue",
        data: [
            {
                name: "Oct-17",
                y: 687,
                drilldown: "Oct-17"
            },
            {
                name: "Nov-17",
                y: 30,
                drilldown: "Nov-17"
            }
        ]
    },
        {
            name: "ActualHours",
            color: "Orange",
            data: [
                {
                    name: "Oct-17",
                    y: 155,
                    drilldown: "Oct-17"
                },
                {
                    name: "Nov-17",
                    y: 18,
                    drilldown: "Nov-17"
                }
            ]
        },
        {
            name: "DifferenceHours",
            color: "green",
            data: [
                {
                    name: "Oct-17",
                    y: -532,
                    drilldown: "Oct-17"
                },
                {
                    name: "Nov-17",
                    y: -12,
                    drilldown: "Nov-17"
                }
            ]
        }],
    drilldown: {
        series: []
    }

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
&#13;
&#13;
&#13;

这是显示罚款的第一张图片数据标签: Here is the 1st image datalabel showing fine

这是钻取后返回主级别的第二张图像,但这次缺少数据标签: Here is the 2nd image after drilldown and back to main level but this time missing datalabel

0 个答案:

没有答案