使用Angular 5在Highcharts中将DrillDown柱形图转换为堆积柱形图

时间:2018-06-27 12:11:21

标签: highcharts angular5 drilldown

我需要在Angular 5中从单个系列的柱形图向下钻取到堆积的柱形图(使用Highcharts),是否有示例/演示?

component.ts

this.chart41 = new Chart({


                chart: {
                    type: 'column'
                },

                xAxis: {
                    type: 'category'
                },

                plotOptions: {
                    column: {
                        cursor: 'pointer',
                        point: {
                            events: {

                            }
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },

                series: [
                    {
                        name: "Days",
                        // colorByPoint: true,
                        data: [
                            {
                                name: "6-May",
                                y: 62.74,
                                drilldown: "6-May"
                            },
                            {
                                name: "7-May",
                                y: 10.57,
                                drilldown: "7-May"
                            },
                            {
                                name: "8-May",
                                y: 7.23,
                                drilldown: "8-May"
                            },
                            {
                                name: "9-May",
                                y: 5.58,
                                drilldown: "6-May"
                            },
                            {
                                name: "10-May",
                                y: 4.02,
                                drilldown: "10-May"
                            },
                            {
                                name: "11-May",
                                y: 1.92,
                                drilldown: "11-May"
                            },
                            {
                                name: "12-May",
                                y: 7.62,
                                drilldown: "12-May"
                            }
                        ]
                    }
                ],
                drilldown: {

                    series: [
                        {
                            name: "6-May",
                            id: "6-May",
                            data: [
                                [
                                    "P1",
                                    12
                                ],
                                [
                                    "P2",
                                    12
                                ],
                                [
                                    "P3",
                                    12
                                ],
                                [
                                    "P4",
                                    12
                                ]
                            ]
                        },
                        {
                            name: "7-May",
                            id: "7-May",
                            data: [
                                [
                                    "P1",
                                    0.1
                                ],
                                [
                                    "P2",
                                    1.3
                                ],
                                [
                                    "P3",
                                    53.02
                                ],
                                [
                                    "P4",
                                    1.4
                                ]
                            ]
                        },
                        {
                            name: "8-May",
                            id: "8-May",
                            data: [
                                [
                                    "P1",
                                    0.1
                                ],
                                [
                                    "P2",
                                    1.3
                                ],
                                [
                                    "P3",
                                    53.02
                                ],
                                [
                                    "P4",
                                    1.4
                                ]
                            ]
                        },
                        {
                            name: "9-May",
                            id: "9-May",
                            data: [
                                [
                                    "P1",
                                    0.1
                                ],
                                [
                                    "P2",
                                    1.3
                                ],
                                [
                                    "P3",
                                    53.02
                                ],
                                [
                                    "P4",
                                    1.4
                                ]
                            ]
                        },
                        {
                            name: "10-May",
                            id: "10-May",
                            data: [
                                [
                                    "P1",
                                    0.1
                                ],
                                [
                                    "P2",
                                    1.3
                                ],
                                [
                                    "P3",
                                    53.02
                                ],
                                [
                                    "P4",
                                    1.4
                                ]
                            ]
                        },
                        {
                            name: "11-May",
                            id: "11-May",
                            data: [
                                [
                                    "P1",
                                    0.1
                                ],
                                [
                                    "P2",
                                    1.3
                                ],
                                [
                                    "P3",
                                    53.02
                                ],
                                [
                                    "P4",
                                    1.4
                                ]
                            ]
                        },
                        {
                            name: "12-May",
                            id: "12-May",
                            data: [
                                [
                                    "P1",
                                    0.1
                                ],
                                [
                                    "P2",
                                    1.3
                                ],
                                [
                                    "P3",
                                    53.02
                                ],
                                [
                                    "P4",
                                    1.4
                                ]
                            ]
                        }
                    ]
                }
            });

视图是这样的- enter image description here

单击任何列(例如5月6日)时,它会显示5月6日的柱状图的向下钻取-

enter image description here

我想在向下钻取的图表中显示堆积的柱形图(到目前为止,只有图例,即5月6日)。

0 个答案:

没有答案