javascript - 当用户沿着 Highcharts 区域图滑动手指时,如何更新外部 DIV?
问题描述
我正在使用 HighCharts 创建一个面积图,当用户在图表上滑动手指时,我需要使用图表中的多个值更新 div。
图表中的值必须与工具提示上显示的值一致。
我可以为此使用特定的事件吗?
这是一个例子:
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Sources: <a href="https://thebulletin.org/2006/july/global-nuclear-stockpiles-1945-2006">' +
'thebulletin.org</a> & <a href="https://www.armscontrol.org/factsheets/Nuclearweaponswhohaswhat">' +
'armscontrol.org</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [
null, null, null, null, null, 6, 11, 32, 110, 235,
369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
]
}]
});
.detail-container {
border:1px solid #000;
margin:10px;
text-align:center;
padding:10px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div class="detail-container">
<div class="detail-value">
Value from Graph Here
</div>
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
解决方案
您可以使用mouseOver
事件来更改<div>
内容,使其包含工具提示中的所有信息:
plotOptions: {
area: {
point: {
events: {
mouseOver: function() {
document.getElementById('customTooltip').innerHTML =
this.series.name + ' had stockpiled <b>' + this.y +
'</b><br/>warheads in ' + this.x
}
}
},
...
}
}
现场演示:http: //jsfiddle.net/BlackLabel/3my5pdot/
API 参考: https ://api.highcharts.com/highcharts/plotOptions.area.point.events.mouseOver
推荐阅读
- crosstab - 在 Cognos Analytics 11 中合并交叉表中的单元格
- java - 当我尝试关闭搜索视图时出现奇怪的行为
- jupyter-notebook - 在 ipywidgets 中显示 IPython.display.HTML 类对象
- macos - 如何让 pyinstaller 在 Mac 上运行?
- java - 如何在java中的线程外获取结果
- java - 如何正确编码以下 URL
- python - 设置不会导入其他文件 django
- html - 如果与父级具有相同的数字类,则将类添加到子级
- service-worker - 如何在服务人员中获取 jwt 令牌
- python - Pycharm 找不到包的问题