與高圖現場多個系列

Question

我想在高圖上同時展示10個系列。用下面的代碼。

function requestData() { 
    $.ajax({ 
     url: 'Default3.aspx', 
     dataType: 'json', 
     error: function (point) { 
      var series = chart.series[10], 

       shift = series.data.length > 50; // shift if the series is longer than 20 


      chart.series[0].addPoint([0, 1], true, true); 
      chart.series[1].addPoint([0, 2], true, true); 
      chart.series[2].addPoint([0, 3], true, true); 
      chart.series[3].addPoint([0, 4], true, true); 
      chart.series[4].addPoint([0, 5], true, true); 
      chart.series[5].addPoint([0, 6], true, true); 
      chart.series[6].addPoint([0, 7], true, true); 
      chart.series[7].addPoint([0, 8], true, true); 
      chart.series[8].addPoint([0, 9], true, true); 
      chart.series[9].addPoint([0, 10], true, true); 


      // call it again after one second 
      setTimeout(requestData, 5000); 
     }, 
     success: function (point) { 
      var series = chart.series[10], 
       shift = series.data.length > 50; // shift if the series is longer than 20 

      // add the point 
      // chart.series[0].addPoint(eval(point), true, shift); 
      chart.series[0].addPoint([0, 1], true, true); 
      chart.series[1].addPoint([0, 2], true, true); 
      chart.series[2].addPoint([0, 3], true, true); 
      chart.series[3].addPoint([0, 4], true, true); 
      chart.series[4].addPoint([0, 5], true, true); 
      chart.series[5].addPoint([0, 6], true, true); 
      chart.series[6].addPoint([0, 7], true, true); 
      chart.series[7].addPoint([0, 8], true, true); 
      chart.series[8].addPoint([0, 9], true, true); 
      chart.series[9].addPoint([0, 10], true, true); 


      // call it again after one second 
      setTimeout(requestData, 5000); 
     }, 
     cache: false 
    }); 
} 

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'line', 
      events: { 
       load: requestData 
      } 
     }, 
     title: { 
      text: 'Sensor Data Vs. Time' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      maxZoom: 20 * 1000 
     }, 
     yAxis: { 
      minPadding: 0.2, 
      maxPadding: 0.2, 
      title: { 
       text: 'Value', 
       margin: 80 
      } 
     }, 

     series: [{ 

      data: [] 
     },{ 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 
     }, { 
      data: [] 

     }] 

    }); 
}); 

該系列的圖例出現在圖表上，但未顯示數據。

Answer 1

我在試錯法的基礎上做了一些修改，並得到它的工作，其實我必須使用eval功能，我以前沒有使用。 下面是答案

的JavaScript

function requestData() { 
    $.ajax({ 
     url: 'Default3.aspx', 
     dataType: 'json', 
     error: function (point) { 
      var series = chart.series[0], 

       shift = series.data.length > 50; // shift if the series is longer than 20 


      var values = eval(point); 
      chart.series[0].addPoint([values[0], values[1]], true, shift); 
      chart.series[1].addPoint([values[0], values[2]], true, shift); 
      chart.series[2].addPoint([values[0], values[3]], true, shift); 
      chart.series[3].addPoint([values[0], values[4]], true, shift); 
      chart.series[4].addPoint([values[0], values[5]], true, shift); 
      chart.series[5].addPoint([values[0], values[6]], true, shift); 
      chart.series[6].addPoint([values[0], values[7]], true, shift); 
      chart.series[7].addPoint([values[0], values[8]], true, shift); 
      chart.series[8].addPoint([values[0], values[9]], true, shift); 
      chart.series[9].addPoint([values[0], values[10]], true, shift); 

      // call it again after defined seconds 
      setTimeout(requestData, 5000); 
     }, 
     success: function (point) { 
      var series = chart.series[0], 
       shift = series.data.length > 50; // shift if the series is longer than 20 

      // add the point 
      // chart.series[0].addPoint(eval(point), true, shift); 
      var values = eval(point); 
      chart.series[0].addPoint([values[0], values[1]], true, shift); 
      chart.series[1].addPoint([values[0], values[2]], true, shift); 
      chart.series[2].addPoint([values[0], values[3]], true, shift); 
      chart.series[3].addPoint([values[0], values[4]], true, shift); 
      chart.series[4].addPoint([values[0], values[5]], true, shift); 
      chart.series[5].addPoint([values[0], values[6]], true, shift); 
      chart.series[6].addPoint([values[0], values[7]], true, shift); 
      chart.series[7].addPoint([values[0], values[8]], true, shift); 
      chart.series[8].addPoint([values[0], values[9]], true, shift); 
      chart.series[9].addPoint([values[0], values[10]], true, shift); 


      // call it again after defined seconds 
      setTimeout(requestData, 5000); 
     }, 
     cache: false 
    }); 
} 

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'spline', 
      events: { 
       load: requestData 
      } 
     }, 
     title: { 
      text: 'Sensor Data Vs. Time' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      maxZoom: 20 * 1000 
     }, 
     yAxis: { 
      minPadding: 0.2, 
      maxPadding: 0.2, 
      title: { 
       text: 'Value', 
       margin: 80 
      } 
     }, 

     series: [{ 
      name: 'Pressure 1 (PSI)', 
      data: [] 
     }, { 
      name: 'Flow 1 (GPM)', 
      data: [] 
     }, { 
      name:'Temperature 1 (C)', 
      data: [] 
     }, { 
      name: 'Speed 1 (RPM)', 
      data: [] 
     }, { 
      name: 'Power 1 (kW)', 
      data: [] 
     }, { 
      name:'Pressure 2 (PSI)', 
      data: [] 
     }, { 
      name:'Flow 2 (GPM)', 
      data: [] 
     }, { 
      name:'Temperature 2 (C)', 
      data: [] 
     }, { 
      name: 'Speed 2 (RPM)', 
      data: [] 
     }, { 
      name: 'Power 2 (kW)', 
      data: [] 

     }] 

    }); 
}); 

服務器端代碼（C＃）

public partial class Default3 : System.Web.UI.Page 
{ 



    public DataTable dt = new DataTable(); 
    public string DATA; 
    List<string> hidXCategories11 = new List<string>(); 

    public string chartData 
    { 
     get; 
     set; 

    } 
    protected void Page_Load(object sender, EventArgs e) 
    { 


     GetData(); 
     var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc); 
     var timeDiff = DateTime.Now - new DateTime(1970, 1, 1); 
     var totaltime = timeDiff.TotalMilliseconds; 
     List<double> _data = new List<double>(); 
     foreach (DataRow row in dt.Rows) 
     { 
      _data.Add(totaltime); 
      _data.Add((double)Convert.ToDouble(row["S11"])); 
      _data.Add((double)Convert.ToDouble(row["S12"])); 
      _data.Add((double)Convert.ToDouble(row["S13"])); 
      _data.Add((double)Convert.ToDouble(row["S14"])); 
      _data.Add((double)Convert.ToDouble(row["S15"])); 
      _data.Add((double)Convert.ToDouble(row["S21"])); 
      _data.Add((double)Convert.ToDouble(row["S22"])); 
      _data.Add((double)Convert.ToDouble(row["S23"])); 
      _data.Add((double)Convert.ToDouble(row["S24"])); 
      _data.Add((double)Convert.ToDouble(row["S25"])); 
     } 

     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     chartData = jss.Serialize(_data); 
     Response.Write(chartData); 

    } 


     private void GetData() 
     { 
      StringBuilder str = new StringBuilder(); 
      SqlConnection con = new SqlConnection("Data Source=localhost\\SQLEXPRESS;Initial Catalog=MyData;Integrated Security=SSPI"); 
      SqlDataAdapter adp = new SqlDataAdapter("select top 1 * from MyTable order by Id desc ", con); 

      adp.Fill(dt); 


     } 

    } 

HTML（的.aspx）代碼

<script src="JavaScript/highcharts.js"></script> 
<script src="JavaScript/exporting.js"></script> 

<div id="container" style="min-width: 280px; height: 400px; margin: 0 auto"></div> 

Answer 2

我建議替換此：

chart.series[0].addPoint([0, 1], true, true); 
//other points as first 
chart.series[9].addPoint([0, 10], true, true); 

與

chart.series[0].addPoint([0, 1], false, true); 
//other points as first 
chart.series[9].addPoint([0, 10], true, true); 

點不能被添加到空圖表，動態的，但你可以在數據設置爲空值喜歡這裏http://jsfiddle.net/g2tka/1/或使用addSeries。