Question

我正在尝试下面给出的highstocks代码

   <script type="text/javascript">


 $(function () {

                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });

                // Create the chart
                $('#container').highcharts('StockChart', {
                    chart: {
                        events: {
                            load: function () {

                                // set up the updating of the chart each second
                                var series = this.series[0];
                                setInterval(function () {
                                    var x = (new Date()).getTime(), // current time
                                    y = <%=chartData%> 
                                    series.addPoint([x, y], true, true);
                                }, 1000);
                            }
                        }
                    },

                    rangeSelector: {
                        buttons: [{
                            count: 1,
                            type: 'minute',
                            text: '1M'
                        }, {
                            count: 5,
                            type: 'minute',
                            text: '5M'
                        }, {
                            type: 'all',
                            text: 'All'
                        }],
                        inputEnabled: false,
                        selected: 0
                    },

                    title: {
                        text: 'Sensor Data'
                    },

                    exporting: {
                        enabled: false
                    },

                    series: [{
                        name: 'Sensor Value',
                        data: (function () {
                             //generate an array of random data
                            var data = [], time = (new Date()).getTime(), i;

                            for (i = -999; i <= 0; i++) {
                                data.push([
                                    time + i * 1000,
                                  <%= chartData%>
                                ]);
                            }
                            return data;
                        })()
                    }]
                });

            });
        </script>

并将其显示在容器中

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

背后的代码是

 public string chartData
    {
        get;
        set;

    }
    protected void Page_Load(object sender, EventArgs e)
    {
        GetData();
        List<int> _data = new List<int>();
        foreach (DataRow row in dt.Rows)
        {
            _data.Add((int)row["Id"]);
        }
        JavaScriptSerializer jss = new JavaScriptSerializer();
        chartData = jss.Serialize(_data); //this make your list in jSON format like [88,99,10]
        Response.Write(chartData);
    }
    private void GetData()
    {
        StringBuilder str = new StringBuilder();
        SqlConnection con = new SqlConnection("Data Source=INBDQ2WK2LBCD2S\\SQLEXPRESS;Initial Catalog=MCAS;Integrated Security=SSPI");
        SqlDataAdapter adp = new SqlDataAdapter("select top 1 Id from Monitoring order by Id desc ", con);
        adp.Fill(dt);
    }

这里我创建了一个JSON，我将它转移到javascript for highchart。

我遇到的问题是它只显示了一点。这些值也会在数据库中更新，而不会在图表中更新。

它出了什么问题？

Answer 1

在你的代码中我可以看到：

setInterval(function () {
    var x = (new Date()).getTime(), // current time
            y = <%=chartData%>; 
    series.addPoint([x, y], true, true);
}, 1000);

我想，chartData变量是你存储新点的地方？至少你期望在那里。但是，在从服务器加载页面之后，您的变量chartData将在HTML中分配一次。您将更新服务器上的值，并不意味着客户端更新值。

我建议使用AJAX调用，例如：http://www.highcharts.com/studies/live-server.htm（参见代码示例的来源）。

实时HighChart不显示数据

1 个答案: