javascript - 如何让用户知道 Highcharts 图表是可点击的？

Question

我正在使用 Highcharts Javascript 库生成图表。

我想制作一个可点击的图表，Highcharts 支持使用以下语法:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart-container-revenue-per-purchaser',
        defaultSeriesType: 'line',
        events: {
            click : function() { location.href = '/revenue/purchaser' }
        }
    },

但是，当您将鼠标悬停在图表上时，没有任何视觉变化(例如出现图表的边框、光标改变形状)来向查看者表明图表是可点击的。

这是 Highcharts 支持的东西还是我必须使用 CSS 来实现它？

谢谢。

Answer 1

试试这个:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart-container-revenue-per-purchaser',
        defaultSeriesType: 'line',
        events: {
            click: function() {
                location.href = '/revenue/purchaser'
            }
        }
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert('clicked');
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    }
});​

取自http://www.highcharts.com/demo/line-ajax

这使用了 plotOptions->serise 中的 'cursor' 选项

cursor : String
You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. Defaults to ''.

http://www.highcharts.com/ref/#plotOptions-series--cursor