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
如果您将单击事件附加到系列，您可以将光标设置为“指针”，以向用户发出可以单击点和线的信号。默认为“”。

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

Answer 2

将此添加到对象

        plotOptions: {
            line: {
                allowPointSelect: true,
                cursor: 'pointer'           
            }
        },