如何在HighCharts中向下钻取多系列样条图的多个级别

时间:2018-12-20 19:17:40

标签: jquery highcharts

如何在HighCharts中将多系列样条图向下钻取到其他多系列?

我创建的条形图没有问题,但是,样条线有所不同,因为它具有多个值,而且我无法进行深入研究。

我正在尝试在区域级别显示6个月的趋势,应该向下钻取以显示区域的6个月趋势。区域应向下钻取以显示各个位置的6个月趋势。

$(function() {
    $('#container').highcharts({
        chart: {
            type: "spline"
        },
        title: {
            text: "6 Month Trend"
        },
        subtitle: {
            text: "Click the lines for more details."
        },
        xAxis: {
            type: "category",
            categories: [
                "July",
                "August",
                "September",
                "October",
                "November",
                "December"
            ]
        },
        legend: {
            enabled: true
        },
        series: [{
            name: "Territory",
            data: [
                1.5643,
                1.572727,
                1.5915,
                1.587355,
                1.575984,
                1.57
            ],
            drilldown: "regions"
        },
            {
                name: "Company",
                data: [
                    1.563662,
                    1.572306,
                    1.59114,
                    1.587355,
                    1.567452,
                    1.545366
                ]
            }
        ],
        drilldown: {
            allowPointDrilldown: false,
            series: [{
                id: "regions",
                data: [{
                    name: "Region 1",
                    data: [
                        1.5643,
                        1.57183,
                        1.59077,
                        1.584542,
                        1.570491,
                        1.566667
                    ],
                    drilldown: "region-1"
                },
                    {
                        name: "Region 2",
                        data: [
                            1.5643,
                            1.57183,
                            1.59077,
                            1.584542,
                            1.570491,
                            1.566667
                        ]
                    }
                ]
            }, {
                id: "region-1",
                data: [{
                    name: "Location 1",
                    data: [
                        1.6643,
                        1.37183,
                        1.79077,
                        1.484542,
                        1.470491,
                        1.366667
                    ]
                },
                    {
                        name: "Location 2",
                        data: [
                            1.7643,
                            1.87183,
                            1.39077,
                            1.684542,
                            1.470491,
                            1.866667
                        ]
                    }
                ]
            }]
        },
        tooltip: {
            pointFormat: "<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.y:.2f}</b><br/>"
        },
        yAxis: {
            title: {
                text: ""
            },
            labels: {
                format: "{value:.2f}"
            }
        }
    });

});

这是一个小提琴 http://jsfiddle.net/webaholik/buocz9gh/25/

1 个答案:

答案 0 :(得分:0)

Highcharts向下钻取模块适用于点,而不适用于序列:

    series: [{
            name: "Territory",
            data: [{
                    y: 1.5643,
                    drilldown: true
                },
                {
                    y: 1.572727,
                    drilldown: true
                },
                ...
            ]
        }]

实时演示:http://jsfiddle.net/BlackLabel/tx5vjk7s/