Question

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

        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和href代码）

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

这是一个简单的问题，但我无处可寻找答案，而高等名人创作者的AJAX示例似乎也被窃听。

有人可以帮助我吗？

Answer 1

使图表上的点可点击集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

我希望这会对你有所帮助

Answer 2

<强> 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

Answer 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/

Highcharts - 点击点？

3 个答案: