jquery - Highcharts 用时间填充实时数据

Question

我已经四处寻找了几天并测试了不同的样本，但我一直无法弄清楚这一点，我希望有人知道这个问题的答案，非常感谢。我正在创建一个图表并填充数据库中的数据。我正在寻找一种方法让它每 5 秒重绘一次图表。我尝试过使用 setInterval 和 setTimeout 以及charts.redraw() 和其他解决方案，我发现阅读了几个不同的示例，但还没有设法让它工作。

我有以下代码:

 $(function () {

    var reports= new Highcharts.Chart({
        chart: {
            renderTo: "reports",
            defaultSeriesType: "area"
        },
        plotOptions: {
            series: {
                color: "#1875d3",
                fillOpacity: 0.1,
                lineWidth: 4,
                marker: {
                    radius: 5,
                    lineWidth: 1,
                    lineColor: "#FFFFFF"
                }
            }
        },
        series: [{
            name: "Reports",
            data: <%= seriesarray %>
        }],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                x: 15,
                y: 15,
                style: {
                    color: "#999999",
                    fontWeight: "bold",
                    fontSize: "10px"
                }
            },
            gridLineColor: "#e7e7e7"
        },
        xAxis: {
            gridLineColor: "#e7e7e7",
            labels: {
                x: 15,
                y: -5,
                style: {
                    color: "#268ccd",
                    fontSize: "10px"
                }
            },
            categories: <%= categoriesarray %>
        },
        tooltip: {
            formatter: function () {
                return "Visits: " + this.y;
            },
            borderColor: "#333333"
        },
        credits: false,
        title: false,
        exporting: false,
        legend: false
    });
});

在代码隐藏中，我有一个方法可以从数据库获取数据并将结果转换为 JSON:

例如

 JavaScriptSerializer jss = new JavaScriptSerializer();
 seriesarray = jss.Serialize(value1); 
 categoriesarray = jss.Serialize(value2); 

我还创建了一个调用 Web 服务的不同版本，如下所示:

        $().ready(function () {

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function() {

                        // set up the updating of the chart each second
                        //var series = this.series[0];
                        //var seriesData = getData();
                        setInterval(function() {
                            var chart = $('#container').highcharts();
                            chart.series[0].setData(getData(), true);
                            //setTimeout(getData, 500);
                        }, 1000);
                    }
                }
            },
            xAxis: {
                gridLineColor: "#e7e7e7",
                labels: {
                    x: 15,
                    y: -5,
                    style: {
                        color: "#268ccd",
                        fontSize: "10px"
                    }
                },
              },
          yAxis: {
              title: {
                  text: null
              },
              labels: {
                  x: 15,
                  y: 15,
                  style: {
                      color: "#999999",
                      fontWeight: "bold",
                      fontSize: "10px"
                  }
              },
              gridLineColor: "#e7e7e7"
          },
          tooltip: {
              headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                  '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              series: {
                  color: "#1875d3",
                  fillOpacity: 0.1,
                  lineWidth: 4,
                  marker: {
                      radius: 5,
                      lineWidth: 1,
                      lineColor: "#FFFFFF"
                  }
              }
          },
          series: getData()
      });

      function getData() {
          var retvalue;
          $.ajax({
              url: 'Test.aspx/getData',
              data: [],
              dataType: 'json',
              type: 'POST',
              async: false,
              contentType: "application/json; charset=utf-8",
              success: function (data) {
                  retvalue = eval(data.d);
                  //setTimeout(getData, 2000);
              },
              cache: false,
              error: function (xhr, ajaxOptions, thrownError) {
                  var errorData = JSON.parse(xhr.responseText);
                  $.each(errorData, function (key, value) {
                      if (key == 'Message') {
                          alert(value);
                          retvalue = "0";
                      }
                  });
              }
          })
          return retvalue;
      }
  });

图表在两个示例中都绘制得很好，但它没有实时更新，而这正是我所需要的。在我的第二个示例中，我实际上没有获得 xAxis 中显示的类别，因为我找不到将其添加到第二个版本的语法。

有人知道如何让图表再次绘制，以便它从我的数据库获取实时数据吗？

最新更新

这是我花了周末弄清楚语法后最接近完成此任务的结果:

 var chart;
    var c = [];
    var d = [];

    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'spline',
                events: {
                    load: getData
                }
            },
            title: {
                text: 'Live data'
            },
            xAxis: {
                categories: c
            },
            yAxis: {
                title: {
                    text: 'Value'
                }
            },
            series: [{
                data: d
            }]
        });
    });

    /**
    * Request data from the server, add it to the graph and set a timeout to request again
    */
    function getData() {
        $.ajax({
            url: 'Test.aspx',
            dataType: 'json',
            success: function (data) {
                var categories = [];
                var seriesData = [];
                $.each(data, function () {
                    categories.push(this.data);
                    seriesData.push(parseInt(this.count));
                });
                chart.xAxis[0].setCategories(categories);
                chart.series[0].setData(seriesData);
                setTimeout(requestData, 1000);
            },
            cache: false
        });
    }

Test.aspx 从我的数据库中获取此内容:

8 月 1 日 8 月 20 日 0 8月21日 8月3日22日 8 月 23 日 1 8 月 24 日 0 8 月 25 日 0

然后我将其转换为 JSON:

{"8 月 19 日":1,"8 月 20 日":0,"8 月 21 日":2,"8 月 22 日":3,"8 月 23 日":1,"8 月 24 日":0,"8 月 25 日":0,"8 月 26 日":0}

例如8 月 19 日 = 水平数据 1 = 垂直数据

请参阅下面的内容，完全没有错误。有人知道我怎样才能现在显示数据吗？非常感谢

Answer 1

尝试将您的 for 更改为这个:

            $.each(data, function (i, e) {
                categories.push(i);
                seriesData.push(parseInt(e));
            });