javascript - 如何根据数据更改highcharts半径
问题描述
我的数据由要显示在图表中的正值和负值组成。我试图以正值的数据点大于负值的数据点的方式显示数据。以下是我的代码
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="demochart"></div>
<button id="update"> Update</button>
<script>
Highcharts.chart('demochart', {
chart: {
type: 'scatter'
},
xAxis: {
categories: [0, 10, 20, 30, 40, 50, 60, 70, 80]
},
series: [{
name: 'Temperature',
data: [15, 50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, 76.5]
}]
},function(chart){
$('#update').click(function(){
var data = chart.series[0].data;
var new_array = [];
new_array = data;
console.log(new_array);
for(var i = 0; i < new_array.length; i++){
console.log("For: "+ new_array[i].y);
if(new_array[i].y > 0){
new_array[i].y = "{y:"+ new_array[i] +",marker: {radius: 10}}"
console.log("If: "+ new_array[i].y);
}else{
new_array[i].y = "{y:"+ new_array[i] +",marker: {radius: 4}}"
console.log("Else: "+ new_array[i].y);
}
}
chart.series[0].setData(new_array);
})
});
</script>
</body>
</html>
当我单击更新按钮时,必须更改数据点值半径的大小。这种情况会奏效吗?
解决方案
您可以简单地将该update
方法用于满足您条件的点并更改标记选项。出于性能原因,最好在循环后设置redraw
参数false
并重绘图表,以避免每次迭代都重绘。
Highcharts.chart('container', {
...
}, function(chart) {
$('#update').click(function() {
var points = chart.series[0].points;
points.forEach(function(point) {
if (point.y > 0) {
point.update({
marker: {
radius: 10
}
}, false);
}
});
chart.redraw();
})
});
现场演示:http: //jsfiddle.net/BlackLabel/jznums3L/
API参考:
https://api.highcharts.com/class-reference/Highcharts.Point#update
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
推荐阅读
- python - 是否有全局注释/标识符来解释 UTF-8 中的 Python 脚本?
- html - 2列布局,依赖滚动
- python - 如何解析不同的字符串日期格式?
- python - Keras 自动编码器输入图像大小
- php - 将 str_repace 集成到 apply_filters() - Wordpress
- javascript - Javascript 语法错误被吞并隐藏在 async/await 函数中
- python - 使用 KDE 的边缘效应密度 2D 图
- php - 如何在数组的最后一个输出上添加另一个元素
- javascript - 如果/那么在基于措辞的谷歌脚本中| 菜单栏中的插件
- java - 在这里我要实现多态性,但我会得到错误