用JSON數據繪製高圖表

Question

如何用JSON數據繪圖高圖表？

我正在研究高分計，我從數據庫中獲得了最新數據的成功。我用JavaScriptSerializer爲

的代碼..

<script type="text/javascript"> 
    $(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'gauge', 
      plotBackgroundColor: null, 
      plotBackgroundImage: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
//Other char parameter comes here 
} 


    function (chart) { 
      setInterval(function() { 

       $.getJSON("S14.aspx", function (data, textStatus) { 
        console.log(data); 
        $.each(data, function (index, wind) { 
         var point = chart.series[0].points[0], 
         newVal = wind; 
         point.update(newVal); 
        }); 

       }); 
      }, 3000); 
     }); 

的JSON的代碼是

public string chartData1 
    { 
     get; 
     set; 

    } 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     List<double> _data = new List<double>(); 
     GetData(); 
     foreach (DataRow row in dt.Rows) 
     { 

      _data.Add((double)Convert.ToDouble(row["S11"])); 

     } 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     chartData1 = jss.Serialize(_data); 

    } 

我的JSON看起來像

[1387204961992.4268,72]

嘛問題在於t他的錶盤沒有根據我需要刷新頁面的最後值移動。我知道這是因爲GetData函數只執行一次。我被困在這裏。

如何根據數據庫中的最新值更新獲得撥號移動？

Answer 1

我覺得有一個bug或visual studio 2012。我只是將整個代碼粘貼到它正在工作的新頁面aspx上。我沒有做任何其他事情，我只是將代碼粘貼到另一頁上。

<script type="text/javascript"> 


     $(function() { 
      $('#container1').highcharts({ 

       chart: { 
        type: 'gauge', 
        alignTicks: false, 
        plotBackgroundColor: null, 
        plotBackgroundImage: null, 
        plotBorderWidth: 0, 
        plotShadow: false 
       }, 

       title: { 
        text: 'Pressure Meter' 
       }, 

       pane: { 
        startAngle: -150, 
        endAngle: 150 
       }, 

       yAxis: [{ 
        min: 0, 
        max: 1000, 
        lineColor: '#339', 
        tickColor: '#339', 
        minorTickColor: '#339', 
        offset: -25, 
        lineWidth: 2, 
        labels: { 
         distance: -20, 
         rotation: 'auto' 
        }, 
        tickLength: 5, 
        minorTickLength: 5, 
        endOnTick: false 
       }, { 
        min: 0, 
        max: 1000, 
        tickPosition: 'outside', 
        lineColor: '#933', 
        lineWidth: 2, 
        minorTickPosition: 'outside', 
        tickColor: '#933', 
        minorTickColor: '#933', 
        tickLength: 5, 
        minorTickLength: 5, 
        labels: { 
         distance: 12, 
         rotation: 'auto' 
        }, 
        offset: -20, 
        endOnTick: false 
       }], 

       series: [{ 
        name: 'Pressure', 
        data: [80], 
        dataLabels: { 
         formatter: function() { 
          var psi = this.y, 
           bar = Math.round(psi/14.50); 
          return '<span style="color:#339">' + psi + ' psi</span><br/>' + 
           '<span style="color:#933">' + bar + ' bar</span>'; 
         }, 
         backgroundColor: { 
          linearGradient: { 
           x1: 0, 
           y1: 0, 
           x2: 0, 
           y2: 1 
          }, 
          stops: [ 
           [0, '#DDD'], 
           [1, '#FFF'] 
          ] 
         } 
        }, 
        tooltip: { 
         valueSuffix: ' psi' 
        } 
       }] 

      }, 
     // Add some life 
     function (chart) { 
      setInterval(function() { 

       $.getJSON("S12.aspx", function (data, textStatus) { 

        $.each(data, function (index, wind) { 
         var point = chart.series[0].points[0], 
         newVal = wind; 
         point.update(newVal); 
        }); 

       }); 
      }, 3000); 
     }); 
     }); 


    </script> 

Answer 2

爲了更新圖表，瀏覽器需要從服務器請求最新的數據。有兩種方法可以做到這一點：

1. 刷新頁面 - 整個頁面被重新抓取，並帶有最新的數據。
2. Ajax請求。這隻需要數據，而不用重新加載整個頁面。

我認爲你想更新圖表而不重新加載整個頁面。爲了做到這一點，你需要了解如何使用jQuery進行Ajax請求。

highchart網站有一些資源可以幫助您（例如http://www.highcharts.com/docs/working-with-data/preprocessing-live-data）。您需要學習如何在javascript中進行ajax調用，並使用返回的數據更新圖表。您還需要編寫返回ajax數據的服務器端部分。給出的例子是在PHP中，但它應該是相當直接在asp.net中做類似的事情。

Answer 3

嘗試的代碼

setInterval(function() { 
    $(function() { 
    $.getJSON('S12.aspx', function(data) { 
     $.each(data, function(val) { 
     if (val !== null) 
     { 
     var point = chart.series[0].points[0]; 
      point.update(val); 
     } 
     }); 
    }); 
    }) 
},2000) 

這部分裏面放上回調圖表，喜歡這裏：http://www.highcharts.com/demo/gauge-speedometer

如果您收到任何錯誤，請附上。