1

JSON和都非常新jQuery，但这是我想要做的 - 我将一个JSON字符串作为更大的报告模型的一部分返回到我的网页，以便在生成报告的同时创建多个图表（使用jqPlot） .

为了练习这些图表，我使用了以下教程 -教程

这是jQuery本教程的内容-

jQuery(document).ready(function() {
    urlDataJSON = '/Graph/HearthRateDataJSON';

    $.getJSON(urlDataJSON, "", function(data) {
        var dataLines = [];
        var dataLabels = "";
        $.each(data, function(entryindex, entry) {
            dataLines.push(entry['Serie']);
            dataLabels = dataLabels + entry['Name'];
        });

        Plot(dataLines, dataLabels);
    });
});

function Plot(dataLines, dataLabels) {
    var line1 = "{ label: 'line1.0' }";
    options = {
        legend: { show: true },
        title: 'Heart rate overview',
        axesDefaults: { pad: 1 },
        seriesDefaults: { showMarker: false, trendline: { show: false }, lineWidth: 3 },
        axes: {
            yaxis: { min: 0, autoscale: true, label: 'HR[bpm]', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
            xaxis: { autoscale: true, label: 'Time', labelRenderer: $.jqplot.CanvasAxisLabelRenderer }
        }
    };

    //Data from database is already an array!
    plot = $.jqplot('chartdiv', dataLines, options);

    plot.redraw(); // gets rid of previous axis tick markers
}

为了检索JSON数据，本教程使用 getJson() 方法指向一个链接。我已经JSON准备好将字符串传递给jQuery但是，例如

[
    {"Name":"Patient","Serie":[[1,4],[2,25],[3,7],[4,14],[5,13]]},
    {"Name":"Test","Serie":[[1,13],[2,5],[3,7],[4,20],[5,17]]}
]

在jqPlot示例中，它们通过如下方式传递硬编码数据：

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

但是，我自动生成JSON的字符串有花括号等。有没有办法在jQuery不使用 getJson 方法的情况下将其传递给？

编辑饼图jQuery代码

    $(document).ready(function () {
        var data4 = '[{ "Label": "Car", "Value": 9 },{ "Label": "Bus", "Value": 2 },{ "Label": "Train", "Value": 7 },{ "Label": "Plane", "Value": 8 },{ "Label": "Boat", "Value": 4 }]';

        var data = $.parseJSON(data4);

        var plot1 = jQuery.jqplot('pieChart', [data],
    {
        seriesDefaults: {
            // Make this a pie chart.
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
                // Put data labels on the pie slices.
                // By default, labels show the percentage of the slice.
                showDataLabels: true
            }
        },
        legend: { show: true, location: 'e' }
    }
  );
    });
4

3 回答 3

3

使用 parseJSON：

 var plotline =  $.parseJSON(jsonstring);

这将像 getJSON 一样工作，只是您可以传递字符串，而不是获取 url。

http://api.jquery.com/jQuery.parseJSON/

于 2012-05-10T15:14:08.747 回答
2

也可以使用浏览器的原生JSON.parse方法

于 2012-05-10T15:15:21.117 回答
2

您可以使用其他答案中提供的任何建议方法对其进行解析，然后使用它。或者只是简单地使用JSON您拥有的数据，因为它是一个数组，并且都{}被视为地图。因此，您可以直接使用它们而无需任何解析，就像我在此处提供的代码中所示的类似情况中所做的那样。

在提供的示例中，JSON数据编码在名为 json 的变量中。

var json = [{
    "Name": "Poll Results",
    "Serie": [[2, 5, 4], [4, 1, 7], [6, 3, 1], [3, 4, 2]]}];
var dataLines = json[0].Serie;
var title = json[0].Name;

然后在最后将dataLines变量传递给图表。

编辑

在玩了你提供的样本后，我得出了以下结论。显然，给定的数据不是 jQuery 的 parseJSON 方法可以使用的 JSON 格式。但是，当您将其字符串化时，它会起作用。

在对数据应用 stringify 后，我的示例显示它工作正常。

我尝试将您的 JSON 包装在内部，并将其转换为等效的 String''并且它起作用了。所以答案很简单，parseJSON你必须传递一个字符串而不是任何其他类型的对象。

于 2012-05-10T15:43:30.807 回答