Javascript Highcharts显示选定点的工具提示_Javascript_Jquery_Charts_Highcharts_Drilldown

Javascript Highcharts显示选定点的工具提示

javascript jquery charts highcharts

Javascript Highcharts显示选定点的工具提示,javascript,jquery,charts,highcharts,drilldown,Javascript,Jquery,Charts,Highcharts,Drilldown,我允许在单击时进行多项选择（第一次单击选择图表，第二次单击在该图表上执行向下搜索）。我想显示一个显示所有选定图表的工具提示（或任何其他方式）（即：如果我选择了两个图表，我想显示关于这两个图表的信息的工具提示）这里是我的HTML： <html> <head> <title>Highcharts</title> <meta charset="UTF-8"> <meta name

我允许在单击时进行多项选择（第一次单击选择图表，第二次单击在该图表上执行向下搜索）。我想显示一个显示所有选定图表的工具提示（或任何其他方式）（即：如果我选择了两个图表，我想显示关于这两个图表的信息的工具提示）

这里是我的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>

谢谢你的帮助

可以通过

chart.getSelectedpoints（）

（向下钻取时使用相同的方法）获取所有选定点，如果选择是累积的（

event.contractive

在选择事件中为true），则将所有选定点的信息添加到自定义标签中

例如：

编辑：

更改代码，因为上面的描述不够清楚：

            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)';

点：{
活动：{
选择：功能（事件）{
变量文本='所有选定点：
'，
chart=this.series.chart，
otherSelected=chart.getSelectedPoints（）；
如果（事件累积）{
Highcharts.每个（其他选定的）、功能（点）{
text+=point.category+'：'+point.y+'
；
});
}
text+=this.category+'：“+this.y+'（上次选中）”；

这应该是一个注释，因为您在JSFIDLE中的示例与我的示例完全相同，并且您没有使用代码来帮助解决我的问题。无论如何，感谢您的帮助visiting@FerranBuireu代码已更改，如果描述不够清晰，请参阅编辑以查看确切的零件。我对代码进行了一些更改，以确保在向下钻取中，X轴显示当前的系列（在动物、船只、奶牛或其他任何东西中）。这是我的错，因为我在最后一分钟更改了它，但您的代码工作得很好。答案已接受：）

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
                        });
                    }
                }
            }
        },
    }
},

            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)';