我正在尝试使用 highchart 制作一个每 5 秒更新一次的简单条形图。下面是我的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="underscore-min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Activity Count per Model'
},
xAxis: {
categories: [],
crosshair: true,
title: {
text: 'Model'
}
},
yAxis: {
min: 0,
title: {
text: 'Activity Count'
}
},
plotOptions: {
column: {
animation: true,
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Count',
data: []
}]
});
setInterval(function(){
$.getJSON("http://localhost/getdata.php", function(data){
$('#container').highcharts().series[0].setData(data.value,true);
$('#container').highcharts().xAxis[0].setCategories(data.model);
});
}, 5000);
</script>
</html>
JSON调用返回的数据:
{"model":["a","aa","aaa","aaaa","aab","b","c","d","e"],"value":[40,20,70,40,70,20,30,40,50]}
现在，代码在功能上运行良好(图表显示数据每 5 秒更新一次)。问题是，如果图表更新为新列，则其上没有动画。但是，如果更新现有数据而不添加新列，则其中会有动画(列增大/缩小，如果轴更改则其他列调整)。当新列插入图表时如何启用动画？
最佳答案
在这种情况下，图表的动画效果有不同的可能性。所以你应该考虑你想要什么动画。
来自setData()文档:
When the updated data is the same length as the existing data, points will be updated by default, and animation visualizes how the points are changed.
根据您的情况，您可以将数据分为两部分 - 新点和其余数据。其余数据可以使用 setData() 设置 - 并且您将保留动画，因为旧数据和新数据具有相同的长度。并且可以通过 addPoint() 添加动画点.
$('#button').click(function () {
const data = new Array(12).fill(2)
chart.xAxis[0].setCategories(categories.concat('13'), false);
chart.series[0].setData(data);
chart.series[0].addPoint(40, true, false, true);
});
关于javascript - 添加新列时的 Highchart 列动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42438240/