我试图制作一个使用高图每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秒更新一次数据)。问题是,如果图表使用新列更新,则其上没有动画。但是如果在不添加新列的情况下更新现有数据,则会在其中显示动画(列增长/缩小,其他列调整,如果轴更改)。如何在将新列插入图表时启用动画?
答案 0 :(得分:0)
在这种情况下,图表应该如何动画有不同的可能性。所以你应该考虑一下你想要的动画。
来自setData() docs:
当更新的数据与现有数据的长度相同时,默认情况下将更新点,动画会显示点的更改方式。
在您的情况下,您可以将数据分为两部分 - 新点和其余数据。其余数据可以使用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);
});