Javascript 使用Highcharts构建仪表板

我想用Highcharts构建一个轻量级仪表板。首先，看看这张图

我想用这个可视化制作一个仪表板。单击某个点时，我希望在可视化下方显示其他信息。例如，我想显示一张图片（.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'
            },

$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
出口：{
已启用：false
},
图表：{
renderTo:'容器'，
键入：“散布”，
zoomType:'xy'
},
标题：{
文字：“发布和仪式之间的天数”，
风格：{
字体大小：“22px”
}
},
副标题:{
文本：“”
},
xAxis：{
分:0,，
对,，
标题：{
启用：对，
文字：“天差”
},
是的，
恩东蒂克：是的，
showLastLabel:true，
绘图线：[{
颜色：'黑色'，
dashStyle:“longdashdot”，
宽度：1，
价值：365，
标签：{
正文：“一年”，
y:580，
轮换：0，
textAlign:'左'，
}            
}]
},
亚克斯：{
民:1929,，
马克斯：2012年，
标题：{
正文：“年”
},
标签：{
格式化程序：函数（）{
返回此.value；
}
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
“在“+this.y+”中，这部电影在典礼后的几天内发行了”
“+this.x+”；
}
},
图例：{
已启用：false
},
学分：{
已启用：false
},
打印选项：{
散布：{
标记：{
半径：4，
国家：{
悬停：{
启用：对，
线条颜色：“rgb（100100）”
}
}
},
国家：{
悬停：{
标记：{
已启用：false
}
}
}
}
},
系列：[{
姓名：'被提名人'，
标记：{
符号：“圆圈”
},

---

有人能帮我完成这个项目吗？

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

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

---

您能修复JSFIDLE链接吗？完成。以下是URL：