Angularjs highchart 多線多X軸折線圖實現
阿新 • • 發佈：2020-08-04
工作中遇到需要根據獲取到JSON資料繪製折線圖的需求，思考後，以Angularjs 所製作的效果圖如下：
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HighChart 折線圖</title> <!--載入jquery--> <script src="framework/jquery-3.2.1.min.js"></script> <!--angularjs--> <script src="framework/angular-1.5.8/angular.js"></script> <script src="framework/angular-1.5.8/angular-animate.min.js"></script> <!-- Charts --><script src="framework/highcharts.js"></script> <script src="framework/highcharts-ng.js"></script> <link href="css/highcharts-ng.css" rel="stylesheet"> <script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script> <script src="app.js"></script> </head> <body ng-app="myApp" ng-controller="ctrl"> <div class="container-fluid" style="height: 500px;width: 50%;overflow: auto; float: left;"> <highchart series="chart.series" title="chart.title" options="chart.options" xAxis="chart.xAxis" style="height: 400px;"> </highchart> </div> </body> </html>
JS程式碼
var app = angular.module('myApp', ['highcharts-ng']); app.controller('ctrl', function($scope, $http){ $http({ method: 'GET', url: '100.json', data: angular.toJson({}) }).then(function successCallback(response){ var resdata = response.data.data; $scope.getreport(resdata); }); $scope.getreport = function(resdata){ var mycode = ""; var mutiCode = []; var mutiData = []; var mutiAxis = []; var mutiResult = []; var outData = []; var k = 0; var myAxis = []; //建立二維陣列 outData = resdata; console.log(resdata); for(var i = 0; i < outData.length; i++){ mutiData[i] = new Array(); mutiAxis[i] = new Array(); } angular.forEach(resdata, function(data){ mycode = data.code; if(mutiCode.indexOf(mycode) == -1){ //第一次進入二維陣列時新增 mutiCode.push(mycode); mutiData[k].push(parseFloat(data.data)); mutiAxis[k].push(data.date); k++; }else{//將相同編號的資料放入二維陣列 var m = mutiCode.indexOf(mycode); mutiData[m].push(parseFloat(data.data)); mutiAxis[m].push(data.date); } }); //去除二維陣列的產生的多餘的空元素 for(var i = 0; i < mutiAxis.length; i++){ if(mutiAxis[i] == ""){ mutiAxis.splice(i, 1); i = i -1; } } //去除二維陣列的產生的多餘的空元素 for(var i = 0; i < mutiData.length; i++){ if(mutiData[i] == ""){ mutiData.splice(i, 1); i = i -1; } } for(var i = 0; i < mutiAxis.length; i++){ myAxis.push({categories: mutiAxis[i]}); } //將二維陣列的資料放入物件陣列 for(var i = 0; i < mutiData.length; i++){ mutiResult.push({name: mutiCode[i], data: mutiData[i], xAxis: i}); } console.log(mutiResult); $scope.chart = { options: { chart: { type: 'line' }, title: { text: '資料折線圖' }, xAxis: myAxis, yAxis: { title: { text: 'kb' }, label: { step: 1, } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, }, series: mutiResult }; } })
JSON程式碼
{ "data":[{ "code": "111222333", "date": "2012", "data": [43934] }, { "code": "222333444", "date": "2013", "data": [24916] }, { "code": "333444555", "date": "2014", "data": [11744] }, { "code": "111222333", "date": "2015", "data": [3769] }, { "code": "333444555", "date": "2016", "data": [12908] } , { "code": "333444555", "date": "2017", "data": [45678] } , { "code": "333444555", "date": "2018", "data": [21456] } , { "code": "222333444", "date": "2014", "data": [78912] }] }