将JSON数据绘制到flot折线图 [英] Plotting JSON data to a flot line chart
本文介绍了将JSON数据绘制到flot折线图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一个Flot-Plot。我有一个JSON记录集，其中包含绘图的行数据。我想我已经设法将JSON记录绑定到相应的数组，这些数组生成图表行的数据。我认为数据被指定为浮点数，但我仍然没有看到图表中的线条实现。
在开发控制台中有两个错误：
elem.css（...）在jQuery.js的第32行未定义
CanvasRenderingContext2D.createLinearGradient的参数4不是有限浮点值在Jquery.js的第3090行
奇怪的是，当我使用Flot图表显示Sin，Cosine值时，这两个错误都存在。
其他然后这个错误我没有得到任何其他人。
我试过的：
绘图功能：
I am working on populating a Flot-Plot. I have a JSON recordset which has the line data for the plot. I think I have managed to get the JSON records bound to the respective arrays which produce the data for the chart's lines. I think the data is assigned as a float but I still do not see the lines materialize in the chart.
Have two errors in the Development Console:
elem.css(...) is undefined at Line 32 in jQuery.js
Argument 4 of CanvasRenderingContext2D.createLinearGradient is not finite floating-point value at line 3090 in Jquery.js
The odd thing is that both of these errors where present when I had the Flot graph showing Sin, Cosine values.
Other then this errors I do not get any others.
What I have tried:
Plotting Function:
function plot() {
// Data arrays for plot lines
var min = [],
max = [],
median = [],
Average = [],
Q1 = [],
Q3 = [],
LCL = [],
LCL2 = [],
UCL = [],
UCL2 = [],
Midpoint = [],
LCL2A = [],
UCL2A = [];
$.ajax({
type: 'GET',
url: 'http://192.168.1.103/Web%20Service/Service.asmx/GetFirstSample',
dataType: 'json',
contentType: 'application/json;charset=utf-8',
success: function(product) {
var products = JSON.parse(product.d);
var len = Object.keys(products.RunSet).length;
for (var i = 0; i < len; i++) {
alert('Index: ' + i + ' Min: ' + products.RunSet[i].Minimum);
min.push([i,products.RunSet[i].Minimum]);
max.push([i,products.RunSet[i].Maximum]);
median.push([i,products.RunSet[i].Median]);
Average.push([i,products.RunSet[i].Average]);
Q1.push([i,products.RunSet[i].Q1]);
Q3.push([i,products.RunSet[i].Q3]);
LCL.push([i,products.RunSet[i].LCL]);
LCL2.push([i,products.RunSet[i].LCL2]);
UCL.push([i,products.RunSet[i].UCL]);
UCL2.push([i,products.RunSet[i].UCL2]);
Midpoint.push([i,products.RunSet[i].Midpoint]);
LCL2A.push([i,products.RunSet[i].LCL2A]);
UCL2A.push([i,products.RunSet[i].UCL2A]);
}
},
failure: function(error) {
alert(error.d);
}
});
var options = {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true //IMPORTANT! this is needed for tooltip to work
},
yaxis: {
min: 0,
max: 50
},
xaxis: {
min: 0,
max: 50
},
tooltip: true,
tooltipOpts: {
content: "'%s' of %x.1 is %y.4",
shifts: {
x: -60,
y: 25
}
}
};
var plotObj = $.plot($("#flot-line-chart"), [{
data: min,
label: "Min"
}, {
data: max,
label: "Max"
}, {
data: median,
label: "Median"
}, {
data: Average,
label: "Average"
}, {
data: Q1,
label: "Q1"
}, {
data: Q3,
label: "Q3"
}, {
data: LCL,
label: "LCL"
}, {
data: LCL2,
label: "LCL2"
}, {
data: UCL,
label: "UCL"
}, {
data: Midpoint,
label: "Midpoint"
}, {
data: LCL2A,
label: "LCL2A"
}, {
data: UCL2A,
label: "UCL2A"
}],
options);
}
});
推荐答案
.ajax （{
类型：'GET'，
url：'http：//192.168.1.103/Web%20Service/Service.asmx/GetFirstSample'，
dataType：'json'，
contentType：'application / json; charset = utf-8'，
success：function（product）{
var products = JSON.parse（product.d）;
var len = Object.keys（products.RunSet）。length;
for（var i = 0; i< len; i ++）{
alert（'Index：'+ i +'Min：'+ products。 RunSet [i] .Minimum）;
min.push（[i，products.RunSet [i] .Minimum]）;
max.push（[i，products.RunSet [i] .Maximum] ）;
median.push（[i，products.RunSet [i] .Median]）;
Average.push（[i，products.RunSet [i] .Average]）;
Q1.push（[i，products.RunSet [i] .Q1]）;
Q3.push（[i，products.RunSet [i] .Q3]）;
LCL.push（[i ，products.RunSe t [i] .LCL]）;
LCL2.push（[i，products.RunSet [i] .LCL2]）;
UCL.push（[i，products.RunSet [i] .UCL]）;
UCL2.push（[i，products.RunSet [i] .UCL2]）;
Midpoint.push（[i，products.RunSet [i] .Midpoint]）;
LCL2A.push（[i，products.RunSet [i] .LCL2A]）;
UCL2A.push（[i，products.RunSet [i] .UCL2A]）;
}
}，
失败：功能（错误）{
alert（error.d）;
}
}）;
var options = {
series：{
lines：{
show：true
}，
points：{
show：true
}
}，
grid：{
hoverable：true //重要！这需要工具提示工作
}，
yaxis：{
min：0，
max：50
}，
xaxis：{
min：0，
max：50
}，
tooltip：true，
tooltipOpts：{
content：'％s'of％x.1是％y.4，
班次：{
x：-60，
y：$ 25
}
}
};
var plotObj =
.ajax({ type: 'GET', url: 'http://192.168.1.103/Web%20Service/Service.asmx/GetFirstSample', dataType: 'json', contentType: 'application/json;charset=utf-8', success: function(product) { var products = JSON.parse(product.d); var len = Object.keys(products.RunSet).length; for (var i = 0; i < len; i++) { alert('Index: ' + i + ' Min: ' + products.RunSet[i].Minimum); min.push([i,products.RunSet[i].Minimum]); max.push([i,products.RunSet[i].Maximum]); median.push([i,products.RunSet[i].Median]); Average.push([i,products.RunSet[i].Average]); Q1.push([i,products.RunSet[i].Q1]); Q3.push([i,products.RunSet[i].Q3]); LCL.push([i,products.RunSet[i].LCL]); LCL2.push([i,products.RunSet[i].LCL2]); UCL.push([i,products.RunSet[i].UCL]); UCL2.push([i,products.RunSet[i].UCL2]); Midpoint.push([i,products.RunSet[i].Midpoint]); LCL2A.push([i,products.RunSet[i].LCL2A]); UCL2A.push([i,products.RunSet[i].UCL2A]); } }, failure: function(error) { alert(error.d); } }); var options = { series: { lines: { show: true }, points: { show: true } }, grid: { hoverable: true //IMPORTANT! this is needed for tooltip to work }, yaxis: { min: 0, max: 50 }, xaxis: { min: 0, max: 50 }, tooltip: true, tooltipOpts: { content: "'%s' of %x.1 is %y.4", shifts: { x: -60, y: 25 } } }; var plotObj =
.plot（
（＃flot-line-chart），[{
数据：分钟，
标签：分钟
}，{
数据：最大值，
标签：最大值
}，{
数据：中位数，
标签：中位数
}，{
数据：平均值，
标签：平均值
}，{
数据：Q1，
标签：Q1
}，{
数据：Q3，
标签：Q3
}，{
数据：LCL ，
标签：LCL
}，{
数据：LCL2，
标签：LCL2
}，{
数据：UCL，
标签：UCL
}，{
数据：中点，
标签：中点
}，{
数据：LCL2A，
标签：LCL2A
}，{
数据：UCL2A，
标签：UCL2A
}]，
期权） ;
}
}）;
("#flot-line-chart"), [{ data: min, label: "Min" }, { data: max, label: "Max" }, { data: median, label: "Median" }, { data: Average, label: "Average" }, { data: Q1, label: "Q1" }, { data: Q3, label: "Q3" }, { data: LCL, label: "LCL" }, { data: LCL2, label: "LCL2" }, { data: UCL, label: "UCL" }, { data: Midpoint, label: "Midpoint" }, { data: LCL2A, label: "LCL2A" }, { data: UCL2A, label: "UCL2A" }], options); } });
这篇关于将JSON数据绘制到flot折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
