javascript - 使用 Highcharts 构建仪表板

Question

我想用 Highcharts 构建一个轻量级的仪表板。首先，看这张图 http://jsfiddle.net/jerryvermanen/Zr7zE/ .

我想用这个可视化制作一个仪表板。单击某个点时，我想在可视化下方显示其他信息。例如，我想显示一张图片 (.jpg)、关于这一点的更多信息以及特定来源的 URL。

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        exporting: {
        enabled: false
        },
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'DAYS BETWEEN RELEASE AND CEREMONY',
    style: {
            fontSize: '22px'
        }
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            min: 0,
    reversed: true,
            title: {
                enabled: true,
                text: 'Days difference'
            },
            startOnTick: true,
            endOnTick: true,
           showLastLabel: true,
     plotLines: [{
            color: 'black',
            dashStyle: 'longdashdot',
            width: 1,
            value: 365,
            label: {
                text: 'ONE YEAR',
        y: 580,
        rotation: 0,
                textAlign: 'left',
            }            
        }]
        },
        yAxis: {
            min: 1929,
    max: 2012,
            title: {
                text: 'Year'
            },
            labels: {
                formatter: function() {
                    return this.value;
                }
            }
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    'In<b>'+this.y +'</b>this movie was released<br/><b>'+ this.x +'</b>days from the ceremony.';
            }
        },
        legend: {
    enabled: false
        },
        credits: {
    enabled: false
    },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 4,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Nominees',
            marker: {
                symbol: 'circle'
            },

谁能帮我完成这个项目？

Answer 1

您可以使用以下代码将点击事件绑定(bind)到该点。

plotOptions: {
    scatter: {
        point: {
            events: {
                click: function() {
                    // do what you want
                    // you can get the point reference using `this`
                }
            }
        }
    }
}

demo