json数据在jqplot折线图中没有正确绑定

时间:2015-03-18 04:49:42

标签: jquery json jqplot

这是我的jqplot图表代码。我的浏览器控制台出现no data specified错误。或者我得到一张没有画线系列的空白图表。请帮我解决这个问题。

var data1 = '[[[5.00,81.00],[7.20,80.00],[9.00,79.00],[10.80,72.00],[12.00,68.00],[15.00,49.00]],[[5.00,162.00],[7.20,160.00],[9.00,158.00],[10.80,144.00],[12.00,136.00],[15.00,98.00]],[[5.00,81.00],[5.00,162.00]],[[15.00,49.00],[15.00,98.00]],[[3.00,133.00],[3.90,126.00],[4.80,119.00],[6.00,107.00],[7.20,91.00],[9.00,61.00]],[[3.00,266.00],[3.90,252.00],[4.80,238.00],[6.00,214.00],[7.20,182.00],[9.00,122.00]],[[3.00,133.00],[3.00,266.00]],[[9.00,61.00],[9.00,122.00]]]';
var data ='{ "Values": [[[5.00, 81.00], [7.20, 80.00], [9.00, 79.00], [10.80, 72.00], [12.00, 68.00], [15.00, 49.00]], [[5.00, 162.00], [7.20, 160.00], [9.00, 158.00], [10.80, 144.00], [12.00, 136.00], [15.00, 98.00]], [[5.00, 81.00], [5.00, 162.00]], [[15.00, 49.00], [15.00, 98.00]], [[3.00, 133.00], [3.90, 126.00], [4.80, 119.00], [6.00, 107.00], [7.20, 91.00], [9.00, 61.00]], [[3.00, 266.00], [3.90, 252.00], [4.80, 238.00], [6.00, 214.00], [7.20, 182.00], [9.00, 122.00]], [[3.00, 133.00], [3.00, 266.00]], [[9.00, 61.00], [9.00, 122.00]]] }'
var data2= JSON.Parse('{ "Values": [[[5.00, 81.00], [7.20, 80.00], [9.00, 79.00], [10.80, 72.00], [12.00, 68.00], [15.00, 49.00]], [[5.00, 162.00], [7.20, 160.00], [9.00, 158.00], [10.80, 144.00], [12.00, 136.00], [15.00, 98.00]], [[5.00, 81.00], [5.00, 162.00]], [[15.00, 49.00], [15.00, 98.00]], [[3.00, 133.00], [3.90, 126.00], [4.80, 119.00], [6.00, 107.00], [7.20, 91.00], [9.00, 61.00]], [[3.00, 266.00], [3.90, 252.00], [4.80, 238.00], [6.00, 214.00], [7.20, 182.00], [9.00, 122.00]], [[3.00, 133.00], [3.00, 266.00]], [[9.00, 61.00], [9.00, 122.00]]] }');                  

var plot1 = $.jqplot('theChart', [data2.Values],
    {
         //dataRenderer:data1,
         title: 'Log Line',
         axes: { xaxis: { renderer: $.jqplot.LogAxisRenderer, ticks: [1, 10, 100, 1000] } },
         stackSeries: true,
         series: [{ color: '#5FAB78' }]
     });

1 个答案:

答案 0 :(得分:0)

有多处错误。

您使用了JSON.Parse代替JSON.parse

您应该将代码包装在$(document).ready(function)中,以便找到dom元素i.e. your div

目标Div名称也不正确,您提到theChart而不是thechart(区分大小写。)

<强>更新 看起来这是你的JSON格式的一个问题,无论如何我已经纠正它并在小提琴中更新,验证下面的小提琴。

Fiddle

您的所有代码应如下所示。

<div id="thechart" style="height:600px;width:95%;"></div>

脚本:

var d = JSON.parse('{ "Values": [[[5.00, 81.00], [7.20, 80.00], [9.00, 79.00], [10.80, 72.00], [12.00, 68.00], [15.00, 49.00]], [[5.00, 162.00], [7.20, 160.00], [9.00, 158.00], [10.80, 144.00], [12.00, 136.00], [15.00, 98.00]], [[5.00, 81.00], [5.00, 162.00]], [[15.00, 49.00], [15.00, 98.00]], [[3.00, 133.00], [3.90, 126.00], [4.80, 119.00], [6.00, 107.00], [7.20, 91.00], [9.00, 61.00]], [[3.00, 266.00], [3.90, 252.00], [4.80, 238.00], [6.00, 214.00], [7.20, 182.00], [9.00, 122.00]], [[3.00, 133.00], [3.00, 266.00]], [[9.00, 61.00], [9.00, 122.00]]] }'); 
console.log(d.Values);
$(function(){
    $.jqplot('thechart', d.Values);
});

当您将JSON格式传递给jqplot函数

时,它应该如下所示
[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]

<强>更新

您需要删除额外的方括号:

var plot1 = $.jqplot('thechart', data3.Values,

而不是

var plot1 = $.jqplot('thechart', [data3.Values],