我一直在四处寻找几天并测试不同的样品，但我无法弄清楚这一点，我希望有人知道这个问题的答案，非常感谢。我正在创建一个图表并从我的数据库中填充数据。我正在寻找一种让它每 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 从我的数据库中得到这个：
1 月 19 日 0 月 20 日 8 月 2 日 21 日 3 月 22 日 8 月 1 日 23 日 0 月 24 日 0 年 8 月 25 日
然后我将其转换为 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 = 垂直数据
请参阅下面的内容，完全没有错误。任何人都知道我怎样才能让数据现在显示？多谢
