使用JSON数据绘制Highchart仪表盘

Question

如何使用JSON数据绘制highchart仪表图？

我正在处理highchart仪表图，成功地显示了来自数据库的最新数据。 我使用了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]

问题是仪表盘的刻度不会根据最新的值而移动，我需要刷新页面。 我知道这是因为 GetData 函数只执行一次。 我卡在这里了。

如何让仪表盘根据数据库中的最新值移动？

- SPandya

Answer 1

我认为在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>

- SPandya

Answer 2

请尝试放置此部分代码

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

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

- Sebastian Bochan

---

不行，它没起作用，仪表只显示0值。 - SPandya

S12.aspx页面在内部网络而不是互联网上。 - SPandya

对的，s12.aspx返回的可能是JSON或其他什么格式？ - Sebastian Bochan

它不断地输出“LOG:0”、“LOG:1”。我已经记录了val变量。 - SPandya

请查看新代码的编辑。在这里，我检查了一下收到的JSON数据是否有任何更改。我一直在持续地收到响应，如“LOG: 1387212362728.6291,771”，但JSON中的数据根本没有变化。 - SPandya

Answer 3

为了更新图表，浏览器需要以某种方式请求来自服务器的最新数据。它可以通过两种方式实现:

1. 页面刷新 - 整个页面重新获取，包含最新的数据。
2. Ajax 请求 - 只请求数据，而不重新加载整个页面。

我想您希望在不重新加载整个页面的情况下更新图表。为此，您需要了解如何使用 jQuery 进行 Ajax 请求。

Highcharts 网站有一些资源可供您参考 (例如：http://www.highcharts.com/docs/working-with-data/preprocessing-live-data)。您需要学习如何在 JavaScript 中发出 Ajax 调用，并使用返回的数据更新您的图表。您还需要编写返回 Ajax 数据的服务器端部分。所提供的示例是使用 PHP 编写的，但在 ASP.NET 中做类似的事情应该相对容易。

- SteveP