C# 使用JSON数据绘制Highchart仪表

如何使用JSON数据绘制highchart Gauge

我正在使用highchart gauge，我成功地显示了数据库中的最新数据。为此，我使用了

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);
        });

$（函数（）{
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
类型：“仪表”，
plotBackgroundColor:null，
plotBackgroundImage:空，
绘图边框宽度：0，
plotShadow:false
}, 
//另一个char参数出现在这里
}
功能（图表）{
setInterval（函数（）{
$.getJSON（“S14.aspx”，函数（数据，文本状态）{
控制台日志（数据）；
$。每个（数据、功能（索引、风）{
变量点=图表。系列[0]。点[0]，
纽瓦尔=风；
更新点（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);

    }

公共字符串chartData1
{
得到；
设置
}
受保护的无效页面加载（对象发送方、事件参数e）
{
列表_data=新列表（）；
GetData（）；
foreach（数据行中的数据行）
{
_data.Add（（双精度）Convert.ToDouble（第[“S11”行]）；
}
JavaScriptSerializer jss=新的JavaScriptSerializer（）；
chartData1=jss.Serialize（_data）；
}

我的JSON看起来像

[138724961992.4268,72]

问题是，仪表盘没有按照我需要刷新页面的最后值移动。我知道这是因为

GetData

函数只执行了一次。我被困在这里了

---

如何根据数据库中最近更新的值来移动拨号盘？

为了更新图表，浏览器需要从服务器请求最新数据。有两种方法可以做到这一点：

页面刷新-使用最新数据再次获取整个页面

一个Ajax请求。它只请求数据，而不重新加载整个页面

我假设您希望在不重新加载整个页面的情况下更新图表。为此，您需要了解如何使用jquery发出ajax请求

---

highcharts网站有一些资源可以帮助您（例如）。您需要学习如何在javascript中进行ajax调用，并使用返回的数据更新图表。您还需要编写返回ajax数据的服务器端部分。给出的示例是php，但在asp.net中执行类似操作应该非常简单。

尝试放置这部分代码

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)

在回调图表中，如下所示：

---

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

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

$（函数（）{
$（“#container1”）。高图({
图表：{
类型：“仪表”，
对:错,，
plotBackgroundColor:null，
plotBackgroundImage:空，
绘图边框宽度：0，
plotShadow:false
},
标题：{
文字：“压力表”
},
窗格：{
startAngle:-150，
端角：150
},
亚克斯：[{
分:0,，
最高：1000，
线条颜色：'#339'，
勾选颜色：'#339'，
minorTickColor:“#339”，
偏移量：-25，
线宽：2，
标签：{
距离：-20，
旋转：“自动”
},
长度：5，
minorTickLength:5，
endOnTick:错误
}, {
分:0,，
最高：1000，
位置：'外部'，
线条颜色：'#933'，
线宽：2，
minorTickPosition:“外部”，
勾选颜色：'#933'，
minorTickColor:“#933”，
长度：5，
minorTickLength:5，
标签：{
距离：12，
旋转：“自动”
},
偏移量：-20，
endOnTick:错误
}],
系列：[{
名称：'压力'，
数据：[80]，
数据标签：{
格式化程序：函数（）{
var psi=这个.y，
巴=数学四舍五入（磅/平方英寸/14.50）；
返回“+psi+”psi
”+
''+bar+'bar'；
},
背景颜色：{
线性梯度：{
x1:0，
y1:0，
x2:0，
y2:1
},
停止：[
[0，#DDD']，
[1'#FFF']
]
}
},
工具提示：{
valueSuffix:'psi'
}
}]
},
//增添活力
功能（图表）{
setInterval（函数（）{