使用JSON数据绘制Highchart Gauge
本文关键字:Highchart Gauge 绘制 数据 JSON 使用 | 更新日期: 2024-09-20 18:59:26
如何使用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);
});
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);
}
我的JSON看起来像
[1387204961992.4268,72]
问题是仪表的刻度盘没有根据最后的值移动,我需要刷新页面。我知道发生这种情况是因为GetData
函数只执行了一次。我被困在这里了。
如何根据数据库中最近更新的值移动拨号?
尝试放置代码的这一部分
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)
回调图表内部,如下所示:http://www.highcharts.com/demo/gauge-speedometer
如果您收到任何错误,请附上。
我认为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>
为了更新图表,浏览器需要以某种方式从服务器请求最新数据。有两种方法可以做到这一点:
- 页面刷新-使用最新数据再次获取整个页面
- Ajax请求。这只会请求数据,而不会重新加载整个页面
我想你想在不重新加载整个页面的情况下更新图表。为了做到这一点,您需要了解如何使用jquery进行ajax请求。
highcharts网站有一些资源可以帮助您(例如。http://www.highcharts.com/docs/working-with-data/preprocessing-live-data)。您需要学习如何使用javascript进行ajax调用,并使用返回的数据更新图表。您还需要编写返回ajax数据的服务器端部分。给出的例子是在php中,但在asp.net中做类似的事情应该是相当直接的。