Highcharts随时间填充实时数据

我一直在四处寻找并测试不同的样品，但我无法弄清楚这一点，我希望有人知道答案，非常感谢。 我正在创建一个图表并填充我的数据库中的数据。 我正在寻找一种方法让它每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:  }], 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:  }, 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: '{point.key}', pointFormat: '' + '', footerFormat: '
{series.name}: 
{point.y:.1f} mm
', 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从我的数据库中获取：

19 Aug 1 20 Aug 0 21 Aug 2 22 Aug 3 23 Aug 1 24 Aug 0 25 Aug 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

尝试将你的改变为这个：

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