你如何將多個變量繪製爲使用高圖的折線圖

我需要將多個變量作爲折線圖來繪製爲高圖。由於變量的數量非常高，我需要能夠抓取數據並動態地繪製它。你如何將多個變量繪製爲使用高圖的折線圖

我有多個服務器，我需要把所有服務器的CPU利用率放在一個圖表中，並用不同的行。我的數據會看起來像這樣從SQL查詢：

ServerName DateTime   CPU 
ServerA  1/2/2013 12:00:00 30 
ServerA  1/2/2013 01:00:00 20 
ServerA  1/2/2013 02:00:00 50 
ServerB  1/2/2013 12:00:00 30 
ServerB  1/2/2013 01:00:00 30 
ServerB  1/2/2013 02:00:00 5 
ServerC  1/2/2013 01:00:00 10 
serverC  1/2/2013 02:00:00 50 
ServerC  1/2/2013 03:00:00 70

我在看下面的代碼，但因爲我不能看到數據，我真的不能做任何事情出來。如何使用highstock圖表將上述sql查詢的結果添加到多行系列圖表中？

$(function() { 
    var seriesOptions = [], 
     yAxisOptions = [], 
     seriesCounter = 0, 
     names = ['MSFT', 'AAPL', 'GOOG'], 
     colors = Highcharts.getOptions().colors; 

    $.each(names, function(i, name) { 

     $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) { 

      seriesOptions[i] = { 
       name: name, 
       data: data 
      }; 

      // As we're loading the data asynchronously, we don't know what order it will arrive. So 
      // we keep a counter and create the chart when all the data is loaded. 
      seriesCounter++; 

      if (seriesCounter == names.length) { 
       createChart(); 
      } 
     }); 
    }); 



    // create the chart when all data is loaded 
    function createChart() { 

     $('#container').highcharts('StockChart', { 
      chart: { 
      }, 

      rangeSelector: { 
       selected: 4 
      }, 

      yAxis: { 
       labels: { 
        formatter: function() { 
         return (this.value > 0 ? '+' : '') + this.value + '%'; 
        } 
       }, 
       plotLines: [{ 
        value: 0, 
        width: 2, 
        color: 'silver' 
       }] 
      }, 

      plotOptions: { 
       series: { 
        compare: 'percent' 
       } 
      }, 

      tooltip: { 
       pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 
       valueDecimals: 2 
      }, 

      series: seriesOptions 
     }); 
    } 

});

來源

2013-07-01 user1471980

您需要將日期「1/2/2013 12:00:00」解析爲JS時間戳（以毫秒爲單位的時間）。您可以使用Date.UTC（）函數。其次，你必須使用數字來顯示CPU值的圖表（不是字符串）。

來源

2013-07-02 10:22:26

我的問題是你如何在一個圖表中序列化多個系列？你知道一個很好的例子嗎？我必須做這個programmaticall，需要調用可擴展來構建圖表。 – user1471980

我們沒有內建的序列化數組的機制。我們使用JSON來配置系列/數據。因此，您需要將您的數據解析爲正確的格式。 –

@ Sebastion Bochan，對於所有這些問題，我很抱歉。您是否有一個例子來說明如何將數據格式化並呈現給高層圖表，例如3種不同的系列數據？ – user1471980

你如何將多個變量繪製爲使用高圖的折線圖

回答

相關問題