javascript - Highcharts - making a point clickable? - Stack Overflow

admin管理员组

文章数量:1201362

I've searched and tested several solutions but it's really hard to find an answer to this seemingly easy problem:

I want to make points on this chart clickable (/)

        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: [/, /]

So far, I've only managed to make the values on the x axis clickable ( by adding them as a simple html a href code )

But I am unable to make the points on the chart clickable?

It's an easy question but nowhere could I find an answer and the AJAX example by the highcharts creators seems to be bugged.

Could anyone please help me?

I've searched and tested several solutions but it's really hard to find an answer to this seemingly easy problem:

I want to make points on this chart clickable (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/]

So far, I've only managed to make the values on the x axis clickable ( by adding them as a simple html a href code )

But I am unable to make the points on the chart clickable?

It's an easy question but nowhere could I find an answer and the AJAX example by the highcharts creators seems to be bugged.

Could anyone please help me?

• javascript
• jquery
• ajax
• highcharts
• frontend

Share Improve this question Follow asked Jan 7, 2014 at 5:17 user3010273user3010273 90055 gold badges1111 silver badges1818 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 20

to make the points on the chart clickable set allowPointSelect as true

plotOptions:{
  series:{
    allowPointSelect: true
  }
}

now you handle the click event or selection event from the

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

I've updated your fiddle here http://jsfiddle.net/a6yL8/1/

API ref link : http://api.highcharts.com/highstock#plotOptions.series.point.events

I hope this will help you

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

click here jsfiddle

https://stackoverflow.com/a/20964524 is nice.

But,

By default, click on line instead of point will also trigger click event, to only allow click on points: 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/

本文标签： javascriptHighchartsmaking a point clickableStack Overflow