用JSON数据绘制高图量规
如何用JSON数据绘制高图表规格？
我的工作是高图表规范，我在显示数据库的最新数据方面取得了成功。我用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函数只执行一次。我被困在这里了。
如何根据数据库中最后的值更新得到拨号移动？
回答 3
Stack Overflow用户
发布于 2013-12-17 08:19:48
我认为在visual studio 2012中有一个bug或什么东西。我只需将整个代码粘贴到新的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>Stack Overflow用户
发布于 2013-12-13 11:43:50
尝试放置这部分代码
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
如果您收到任何错误，请附上。
Stack Overflow用户
发布于 2013-12-13 09:32:10
为了更新图表，浏览器需要从服务器请求最新的数据。有两种方法可以做到这一点：
- 一次页面刷新-整个页面将再次被获取，并使用最新的数据。
- Ajax请求。这只会请求数据，而不会重新加载整个页面。
我想你想要更新图表，而不重新加载整个页面。为了做到这一点，您需要了解如何使用jquery生成ajax请求。
高图表网站有一些资源，可以帮助您(例如http://www.highcharts.com/docs/working-with-data/preprocessing-live-data)。您需要学习如何在javascript中进行ajax调用，并使用返回的数据更新图表。您还需要编写返回ajax数据的服务器端部分。给出的示例是php中的，但是在asp.net中执行类似的操作应该是非常直接的。
https://stackoverflow.com/questions/20559192
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号