Highcharts 動態生成series

場景

工作中遇到需要動態建立折線圖，並賦值，並非後臺組裝直接data：data，需要格式化資料，並動態組裝

程式碼如下

• 後端（JAVA）

LineChart lineChart = new LineChart();
lineChart.setProName("小黑");
lineChart.setProData("[4,7,-5,5,9]");
LineChart lineChart1 = new LineChart();
lineChart1.setProName("小白");
lineChart1.setProData
 
("[2,-4,-3,6,8]");
LineChart lineChart2 = new LineChart();
lineChart2.setProName("小灰");
lineChart2.setProData("[1,4,-5,7,4]");
List<LineChart> lineCharts = new ArrayList<>();
lineCharts.add(lineChart1);
lineCharts.add(lineChart2);
lineCharts.add(lineChart);

• 前端（JS）

$.getJSON('/server_address'
 
, function (data) {
     var series = [];

     for(i=0; i<data.length; i++) {
         console.log(data[i].proData);
         series.push({"name": data[i].proName, "data": eval(data[i].proData)});
     }

     chart = Highcharts.chart('container2', {
         chart: {
             zoomType: 'x',
             type:
 
 'area'
         },
         title: {
             text: '任務建立情況'
         },
         subtitle: {
             text: document.ontouchstart === undefined ?
                     '滑鼠拖動可以進行縮放' : '手勢操作進行縮放'
         },
         xAxis: {
             type: 'datetime',
             dateTimeLabelFormats: {
                 millisecond: '%H:%M:%S.%L',
                 second: '%H:%M:%S',
                 minute: '%H:%M',
                 hour: '%H:%M',
                 day: '%m-%d',
                 week: '%m-%d',
                 month: '%Y-%m',
                 year: '%Y'
             }
         },
         tooltip: {
             xDateFormat: '%Y-%m-%d'
         },
         yAxis: {
             title: {
                 text: '數量'
             }
         },
         plotOptions: {
             area: {
                 fillColor: {
                     linearGradient: {
                         x1: 0,
                         y1: 0,
                         x2: 0,
                         y2: 1
                     },
                     stops: [
                         [0, Highcharts.getOptions().colors[0]],
                         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                     ]
                 },
                 marker: {
                     radius: 2
                 },
                 lineWidth: 1,
                 states: {
                     hover: {
                         lineWidth: 1
                     }
                 },
                 threshold: null
             }
         },
         series: series
     });
 });

• data 資料格式

[1,4,-5,7,4]
// 後臺可以由Java List物件組裝，然後呼叫toString()函式獲得