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-＆gt; serise

中的'cursor'选项

光标：字符串
如果您有连接到系列的点击事件，则可以将光标设置为“指针”，以向用户发出可以单击点和线的信号。默认为''。

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

Answer 2

将此添加到对象

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

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

2 个答案: