1

JSONと の両方に非常に新しいjQueryですが、これが私がやろうとしていることです -レポートが生成されると同時にJSON（ を使用して）多数のグラフを作成するために、より大きなレポートモデルの一部として文字列をWebページに返しています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 メソッドを使用せずにこれを渡す方法はありますか?

EDIT-円グラフ 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データを配列として使用し、すべて{}をマップとして扱うだけです。したがって、ここで利用可能なコードに示されている同様の状況で行っているように、解析せずにそのまま使用できます。

提供されているサンプルには、JSONjson という変数にエンコードされたデータがあります。

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を内部にラップすることで、JSONを同等の文字列に変えてみましたが、''うまくいきました。したがって、答えは簡単に使用できるparseJSONメソッドであり、他の種類のオブジェクトではなく、文字列を渡す必要があります。

于 2012-05-10T15:43:30.807 に答える