Highcharts - 使一个点可点击？答案

【问题标题】：Highcharts - making a point clickable?Highcharts - 使一个点可点击？
【发布时间】：2014-01-24 17:04:27
【问题描述】：

我已经搜索并测试了几种解决方案，但对于这个看似简单的问题，真的很难找到答案：

我想让这张图表上的点可点击 (http://jsfiddle.net/a6yL8/)

        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            url: [http://test.com/, http://test2.com/]

到目前为止，我只设法使 x 轴上的值可点击（通过将它们添加为简单的 html a href 代码）

但我无法使图表上的点可点击？

这是一个简单的问题，但我找不到答案，而且 highcharts 创建者的 AJAX 示例似乎被窃听了。

谁能帮帮我？

【问题讨论】：

标签： javascript jquery ajax highcharts frontend

【解决方案1】：

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JQuery

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        plotOptions: {
            series: {
                   marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 1,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                },    
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            alert('okk');
                            }
                        }
                    }
                }

        },
        legend: {
            type: 'area',
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    });
});

点击这里jsfiddle

【讨论】：

这不是带有可点击点的图表 - 你确定你已经粘贴了你的意思吗？
正确答案。接受的答案对我不起作用。谢谢。

【解决方案2】：

使图表上的点可点击设置allowPointSelect为真

plotOptions:{
  series:{
    allowPointSelect: true
  }
}

现在您处理来自

的点击事件或选择事件

plotOptions:{
  series:{
    point:{
      events:{
        select: function(e){
          //your logic here
        }
      }
    }
  }
}

我在这里更新了你的小提琴http://jsfiddle.net/a6yL8/1/

API 参考链接：http://api.highcharts.com/highstock#plotOptions.series.point.events

希望对你有帮助

【讨论】：

这将使点可点击，但不能点击线。请检查答案中的 API 参考。

【解决方案3】：

https://stackoverflow.com/a/20964524 不错。

但是，

默认情况下，点击线而不是点也会触发点击事件，只允许点击点：plotOptions.series.point.events.click

click: function (e) {
    let $target = $(e.target)
    if (!$('<b></b>').addClass($target.attr('class')).is('.highcharts-point, .highcharts-halo')) {
      return
    }
    // do your work below ↓
}

http://jsfiddle.net/M5E5r/42/

【讨论】：