Question

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

系列＆＃34; LIST＆＃34;可以是任何现在它显示＆＃34; A＆＃34; ＆＃34; B＆＃34;＆＃34; C＆＃34;它可以有更多或更少。基于可用的系列，应该绘制图表。我也粘贴了表格的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]]

具有多个系列的HighCharts

1 个答案: