用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

如果您收到任何错误，请附上。