【问题标题】:How to drilldown multi-series spline charts multiple levels in HighCharts如何在 HighCharts 中钻取多系列样条图的多个级别
【发布时间】:2019-05-21 08:01:34
【问题描述】:

如何在 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/

【问题讨论】:

    标签: jquery highcharts


    【解决方案1】:

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

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

    现场演示:http://jsfiddle.net/BlackLabel/tx5vjk7s/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-03-31
      • 1970-01-01
      • 2018-03-30
      相关资源
      最近更新 更多