具有多个系列的 HighCharts

Question

下面是我的表格数据，我已将其转换为 JSON 并将其链接到 HighCharts 。 但我不确定如何在样条曲线中显示不同的系列。我的系列将是“LIST”，在 X 轴上，“时间”和 Y 将分别携带每个系列 0 和 1 的状态。

系列“LIST”可以是任何现在它分别显示“A”、“B”、“C”，它可以有更多或更少。根据可用的系列，应该绘制图表。我已经粘贴了表格的 JSON 数据也是如此。

LIST  Time   Status
 A     22:05   0
 B     22:10   1
 C     22:30   1
 A     22:40   0
 C     22:50   1
 B     22:60   1

 [{"LIST":"A","Status":"0","Time":"22:05"},{"LIST":"B","Status":"1","Time":"22:10"},
 {"LIST":"C","Status":"1","Time":"22:30"},{"LIST":"A","Status":"0","Time":"22:40"},
 {"LIST":"C","Status":"1","Time":"22:50"},{"LIST":"B","Status":"1","Time":"22:60"}]

我在代码中尝试了以下内容，但无济于事。下面是代码

 var handlerURL = "http://localhost:50687/Handler.ashx;
         $.ajax({
             url: handlerURL,
             type: "GET",
             datatype: "json",
             contentType: 'application/json',
             complete: function (json) {
                 var jsonData = jQuery.parseJSON(json.responseText);
                 var List = _.pluck(jsonData, 'List');
                 period = _.pluck(jsonData, 'Time');
                 status = _.pluck(jsonData, 'Status');
                 //                     var dateTime = [];
                 //                     for (i = 0; i < period.length; i++) {
                 //                         dateTime = (period[i]);
                 //                     }
             }

         });
          options = {
             chart: {
                 renderTo: 'container',
                 type: 'spline',
                 marginRight: 130,
                 marginBottom: 50
             },

             setOptions: ({
                 global: { useUTC: true }
             }),

             title: {
                 text: 'Live Data',
                 x: -20
             },
             subtitle: {
                 text: '',
                 x: -30
             },
             xAxis: {
                 categories: period,
                 type: 'datetime',
                 tickPixelInterval: 100,
                 plotLines: [{
                     width: 5,
                     color: '#808080'
                 }]
             },
             yAxis: {
                 min: 0, max: 1,
                 title: {
                     text: 'Status'
                 },
                 plotLines: [{
                     value: 0,
                     width: 1,
                     color: '#808080'
                 }]
             },
             tooltip: {
                 formatter: function () {
                     return '<b>' + this.series.name + '</b><br/>' +
                        this.x + ': ' + this.y;
                 }
             },
             legend: {
                 layout: 'vertical',
                 align: 'right',
                 verticalAlign: 'top',
                 x: -10,
                 y: 100,
                 borderWidth: 0
             },
             series: [{
                 data: status
             }]
         }

         options.xAxis.categories = period;
         chart = new Highcharts.Chart(options);

Answer 1

一般来说有几个建议：

• 您可以使用或分类轴或日期时间，但不能同时使用：

       xAxis: {
           // categories: period, - remove that?
           type: 'datetime',
           tickPixelInterval: 100,
           plotLines: [{
               width: 5,
               color: '#808080'
           }]
       },
  

• 要创建多个系列，您需要数组中的多个系列对象，就像这样：

       series: [{
           data: status_1
       }, {
           data: status_2
       }]
  

• status_1/status_2 等应该是那种格式：

       [[timestamp1, value1], [timestamp2, value2], ... , [timestampN, vlaueN]]