1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 Highcharts 图表</title>
<!-- 引入 jquery.js -->
<script src="static/jquery-3.3.1.min.js"></script>
<!-- 引入 highcharts.js -->
<script src="static/highcharts-7.0.3.js"></script>
<style>
#xml {
display: none;
}
</style>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container"></div>
<pre id="csv">分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15</pre>
<pre id="xml">
<chart>
<categories>
<item>苹果</item>
<item>梨</item>
<item>橙子</item>
<item>香蕉</item>
</categories>
<series>
<name>小明</name>
<data>
<point>8</point>
<point>4</point>
<point>6</point>
<point>5</point>
</data>
</series>
<series>
<name>小红</name>
<data>
<point>3</point>
<point>4</point>
<point>2</point>
<point>3</point>
</data>
</series>
<series>
<name>小张</name>
<data>
<point>86</point>
<point>76</point>
<point>79</point>
<point>77</point>
</data>
</series>
<series>
<name>小芳</name>
<data>
<point>3</point>
<point>16</point>
<point>13</point>
<point>15</point>
</data>
</series>
</chart>
</pre>
<script src="static/b.js"></script>
</body>
</html>
2.js代码
1 var options = { 2 chart: { 3 type: 'column' 4 }, 5 title: { 6 text: '水果消费情况' 7 }, 8 xAxis: { 9 categories: [] 10 }, 11 yAxis: { 12 title: { 13 text: '单位' 14 } 15 }, 16 series: [] 17 }; 18 var $xml = $('#xml'); 19 // 处理分类 20 $xml.find('categories item').each(function(i, category) { 21 options.xAxis.categories.push($(category).text()); 22 }); 23 // 处理数据列 24 $xml.find('series').each(function(i, series) { 25 var seriesOptions = { 26 name: $(series).find('name').text(), 27 data: [] 28 }; 29 // 处理数据类数据 30 $(series).find('data point').each(function(i, point) { 31 seriesOptions.data.push( 32 parseInt($(point).text()) 33 ); 34 }); 35 // 将数据列对象 push 到数据列数组里 36 options.series.push(seriesOptions); 37 }); 38 Highcharts.chart('container', options);