如何根据数据更改高图表半径
我有由正值和负值组成的数据，这些数据将显示在图表中。我试图以正值的数据点大于负值的数据点的方式显示数据。以下是我的代码
<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>
当我单击更新按钮时，必须更改数据点值半径的大小。这种情况能行吗？
白衣非少年1回答
-
阿波罗的战车
您只需对符合您条件的点使用该方法，即可更改标记选项。出于性能原因，最好将参数设置为循环后重绘图表，以避免在每次迭代时重绘。updateredrawfalseHighcharts.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/接口参考：https://api.highcharts.com/class-reference/Highcharts.Point#updatehttps://api.highcharts.com/class-reference/Highcharts.Chart#redraw
随时随地看视频慕课网APP
相关分类
JavaScript