本文为原创，不经同意，不能转载，谢谢大家理解。
PS：因為在工作中經常會用的這個插件，所以做個日常歸納方便自己查閱，也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式，希望也能幫助大家，謝謝，如有雷同純屬巧合，慢慢完善中。
因为公司需求要在一个页面加载多个图表，如果一个id写一个图表的话，不知道要写多少代码，所以就开始简化代码之路；而且series里面的数据需要动态加载，我也不知道会加载多少数据，所以，能简化就简化吧，在此给大家分享一下，有什么问题或者错误的地方还请纠正，感谢大家。
解决思路分析
第一种办法：
1：首先的解决思路是，同时加载多个图表的话，必须要在ajax下面套一个for循环，然后循环整个charts
2：因为图表是根据id来分配放在那里的，所以，在json中要放一个专门放id的属性和属性值，也有其他办法，以后在完善吧！话不多说上代码~
3：我懒得写命名这些啦，大家看得懂就可以哟，取名字什么的最烦了，哈哈哈，见谅哈~~~
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container1" style="min-width:400px;height:400px"></div>
<div id="container2" style="min-width:400px;height:400px"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "get",
url: "js/index.json",//加载json数据
dataType: "json",
async: true,
success: function(reDatea) {
for(var bigxh = 0; bigxh < reDatea.reDates.length; bigxh++) {
var reDate = reDatea.reDates[bigxh];
console.log(JSON.stringify(reDate.idd));
var ids = reDate.idd;
var chart = Highcharts.chart({
chart: {
renderTo: ids,
type: 'line'
},
title: {
text: '<span style="font-family:Arial">' + reDate.ChartName + '</span>'
},
subtitle: {
text: ''
},
xAxis: {
categories: reDate.XAxisName
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
tooltip: {
crosshairs: true,
shared: false,
formatter: function() {
return '<b>' + this.series.name + '</b><br>' + '时间:' +
this.x + '<br>FR:' + this.y;
}
},
series: [{
name: '东京',
marker: {
symbol: 'square'
},
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(https://www.highcharts.com/demo/gfx/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
}]
});
var serieslen = chart.series.length;
for(var i = 0; i < serieslen; i++) {
chart.series[i].remove();
}
for(var s = 0; s < reDate.DataList.length; s++) {
var aa = reDate.DataList[s];
var bb = {
name: aa.name,
data: aa.data,
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
color: '#000',
fontFamily: 'Arial',
},
format: '{y}'
},
}
chart.addSeries(bb);
}
}
}
});
})
</script>
</body>
</html>
JSON：
{"reDates":[{"ChartName":"2010 ~ 2016 年太阳能行业就业人员发展情况","idd":"container1","XAxisName":["Feb","Mar","W01","W02","W03","W04"],"DataList":[{"name":"安装，实施人员","data":[8000,4000,8000,6000,5000,4000]},{"name":"工人","data":[8000,5000,8000,8000,6000,5000]},{"name":"销售","data":[5000,8000,4000,8000,8000,8000]}]},{"ChartName":"美苏核武器库存量","idd":"container2","XAxisName":["Feb","Mar","W01","W02","W03","W04"],"DataList":[{"name":"美国","data":[3000,4000,8000,6000,5000,4000]},{"name":"苏联/俄罗斯","data":[8000,5000,8000,8000,6000,5000]},{"name":"其他","data":[5000,8000,4000,8000,8000,8000]}]}]}
第二种办法：
1：首先的解决思路是，同时加载多个图表的话，必须要在ajax下面套一个for循环，然后循环整个charts。
2：在前端頁面container0從0開始寫，然後在大循環中直接循環大循環的bigxh參數，就可以了。
3：我懒得写命名这些啦，大家看得懂就可以哟，取名字什么的最烦了，哈哈哈，见谅哈~~~
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container0" style="min-width:400px;height:400px"></div>
<div id="container1" style="min-width:400px;height:400px"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "get",
url: "js/index.json",//加载json数据
dataType: "json",
async: true,
success: function(reDatea) {
for(var bigxh = 0; bigxh < reDatea.reDates.length; bigxh++) {
var reDate = reDatea.reDates[bigxh];
var chart = Highcharts.chart({
chart: {
renderTo: ‘container’+bigxh.toString(),//這裡的num是根據大循環的bigxh的參數走的，這個要注意下
type: 'line'
},
title: {
text: '<span style="font-family:Arial">' + reDate.ChartName + '</span>'
},
subtitle: {
text: ''
},
xAxis: {
categories: reDate.XAxisName
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
tooltip: {
crosshairs: true,
shared: false,
formatter: function() {
return '<b>' + this.series.name + '</b><br>' + '时间:' +
this.x + '<br>FR:' + this.y;
}
},
series: [{
name: '东京',
marker: {
symbol: 'square'
},
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(https://www.highcharts.com/demo/gfx/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
}]
});
var serieslen = chart.series.length;
for(var i = 0; i < serieslen; i++) {
chart.series[i].remove();
}
for(var s = 0; s < reDate.DataList.length; s++) {
var aa = reDate.DataList[s];
var bb = {
name: aa.name,
data: aa.data,
dataLabels: {
enabled: true,
style: {
fontSize: '14px',
color: '#000',
fontFamily: 'Arial',
},
format: '{y}'
},
}
chart.addSeries(bb);
}
}
}
});
})
</script>
</body>
</html>
JSON：
{"reDates":[{"ChartName":"2010 ~ 2016 年太阳能行业就业人员发展情况","XAxisName":["Feb","Mar","W01","W02","W03","W04"],"DataList":[{"name":"安装，实施人员","data":[8000,4000,8000,6000,5000,4000]},{"name":"工人","data":[8000,5000,8000,8000,6000,5000]},{"name":"销售","data":[5000,8000,4000,8000,8000,8000]}]},{"ChartName":"美苏核武器库存量","XAxisName":["Feb","Mar","W01","W02","W03","W04"],"DataList":[{"name":"美国","data":[3000,4000,8000,6000,5000,4000]},{"name":"苏联/俄罗斯","data":[8000,5000,8000,8000,6000,5000]},{"name":"其他","data":[5000,8000,4000,8000,8000,8000]}]}]}
昨天写好后，忘记给大伙们来张图了，图献上：这个就是通过同一个charts循环出来的2个charts图：
