Question

我在点击时允许多项选择（首先点击选择一个图表，然后第二次点击就会在该图表上进行深入分析）。我想显示一个显示所有选定图表的工具提示（或任何其他方式）（即：如果我选择两个图表，我想要一个工具提示，显示有关这两个图表的信息）。

这是我的HTML：

<html>
    <head>
        <title>Highcharts</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script src="http://github.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/drilldown.js"></script>
        <script src="highcharts.js" type="text/javascript"></script>
        <!--Black theme
        <script src="black-theme.js" type="text/javascript"></script>
        -->
    </head>
    <body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
        <!-- <button id="button">Get selected points</button>
         <div>event: <span id="label"></span></div>-->
    </body>
</html>

这是我的Javascript文件：

$(function () {
    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions && e.point.selected) {
                        var chart = this,
                                points = chart.getSelectedPoints(),
                                drilldowns = {
                                    'Animals': {
                                        name: 'Animals',
                                        data: [
                                            ['Cows', 2],
                                            ['Sheep', 3]
                                        ]
                                    },
                                    'Fruits': {
                                        name: 'Fruits',
                                        data: [
                                            ['Apples', 5],
                                            ['Oranges', 7],
                                            ['Bananas', 2]
                                        ]
                                    },
                                    'Cars': {
                                        name: 'Cars',
                                        data: [
                                            ['Toyota', 1],
                                            ['Volkswagen', 2],
                                            ['Opel', 5]
                                        ]
                                    }
                                };

                        Highcharts.each(points, function (p) {
                            chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
                        });
                        chart.applyDrilldown();
                    }

                },
                drillup: function (e) {
                    var chart = this,
                            points = [];
                    setTimeout(function () {
                        points = chart.getSelectedPoints();

                        Highcharts.each(points, function (p) {
                            // unselect points from previous drilldown
                            p.selected = false;
                            p.setState('', true);
                        });
                    }, 0);
                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category',
            categories: [
                'Animals',
                'Fruits',
                'Cars'
            ],
        },
        yAxis: {
            title: {
                text: 'Values'
            }

        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: false,
            useHTML: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                allowPointSelect: true
            },
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
                allowPointSelect: true,
                name: 'Test things',
                colorByPoint: true,
                data: [{
                        name: 'Animals',
                        y: 5,
                        drilldown: true
                    }, {
                        name: 'Fruits',
                        y: 2,
                        drilldown: true
                    }, {
                        name: 'Cars',
                        y: 4,
                        drilldown: true
                    }]
            }],
        drilldown: {
            series: []
        }
    });
});

编辑：我已经尝试过这个解决方案，但不幸的是只显示了最后一个选择点：

plotOptions: {
    column: {
        allowPointSelect: true
    },
    series: {
        borderWidth: 0,
        dataLabels: {
            enabled: true
        },
        point: {
            events: {
                select: function () {
                    var text = this.category + ': ' + this.y + ' was last selected',
                            chart = this.series.chart;
                    if (!chart.lbl) {
                        chart.lbl = chart.renderer.label(text, 100, 70)
                                .attr({
                                    padding: 10,
                                    r: 5,
                                    fill: Highcharts.getOptions().colors[1],
                                    zIndex: 5
                                })
                                .css({
                                    color: '#FFFFFF'
                                })
                                .add();
                    } else {
                        chart.lbl.attr({
                            text: text
                        });
                    }
                }
            }
        },
    }
},

谢谢你的帮助！

Answer 1

可以通过chart.getSelectedpoints()获取所有选定的点（在向下钻取中使用相同的点），如果选择是累积的（选择事件中的event.accumulative将为真），则添加有关所有选定点的信息进入自定义标签。

示例：http://jsfiddle.net/xbvmpev5/

修改

更改了代码，因为上面的描述不够明确：

point: { events: { select: function (event) { var text = 'All selected points: <br/>', chart = this.series.chart, otherSelected = chart.getSelectedPoints(); if (event.accumulate) { Highcharts.each(otherSelected, function (point) { text += point.category + ': ' + point.y + '<br/>'; }); } text += this.category + ': ' + this.y + ' (last selected)';

Highcharts工具提示显示选定的点

1 个答案: