JS highcharts動態柱狀圖原理及實現
阿新 • • 發佈：2020-10-18
實現一個柱狀圖，這個柱狀圖的高度在不停的重新整理，效果如下：
官網是沒有動態重新整理的示例的，由於需要我查看了其原始碼，並根據之前示例做出了動態柱狀圖的效果，希望對同學們有用！
看一下程式碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>Highcharts Example</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="highcharts.js"></script>
<script language="javascript" type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',type: 'column',events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var data = [];
data.push(['Apples',Math.random()]);
data.push(['Oranges',Math.random()]);
data.push(['Pears',Math.random()]);
data.push(['Grapes',Math.random()]);
data.push(['Bananas',Math.random()]);
series.setData(data);
},2000);
}
}
},title: {
text: 'Java小強制作'
},xAxis: {
categories: ['Apples','Oranges','Pears','Grapes','Bananas']
},yAxis: {
min: 0,title: {
text: '當前產值'
},stackLabels: {
enabled: true,style: {
fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},legend: {
align: 'right',x: -100,verticalAlign: 'top',y: 20,floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',borderColor: '#CCC',borderWidth: 1,shadow: false
},tooltip: {
formatter: function() {
return ''+ this.x +'<br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},plotOptions: {
column: {
stacking: 'normal',dataLabels: {
enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},series: [{
name: 'John',data: [5,3,4,7,2]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px;height: 400px"></div>
</body>
</html>同樣，繪製這個圖需要的也是雙維陣列，我嘗試了幾個方法，使用 series.setData(data); 可是實現資料的重新指定！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。