0

json データを使用して jqplot で複数の線を描画しようとしています jqPlot に疑問があります。json データを使用して jqPlot でグラフをプロットしています。

var jsonData1 = {"PriceTicks": [{"Price":5.5,"TickDate":"Jan"}, 
                        {"Price":6.8,"TickDate":"Mar"},
                        {"Price":1.9,"TickDate":"June"},                            
                        {"Price":7.1,"TickDate":"Dec"}]};                               

      var jsonData2 = {"PriceTicks": [{"Price":1.5,"TickDate":"Jan"}, 
                        {"Price":2.8,"TickDate":"Feb"},
                        {"Price":3.9,"TickDate":"Apr"},                         
                        {"Price":9.1,"TickDate":"Dec"}]};

このように呼び出すことができるJavaScript配列があるとします

$.jqplot('chartdiv', [cosPoints, sinPoints, powPoints1, powPoints2, powPoints3],
        {
          title:'Line Style Options',
          seriesDefaults: {
            showMarker:false,                           
        },  

        }
      );

ここで、cosPoints、sinePoints などは、json データを呼び出さなければならないのと同様の方法で JavaScript 配列です。失敗した次の方法を使用しました。助けてください。

$.jqplot('jsonChartDiv', [jsonData1,jsonData2] {
          title:'Fruits',
          series:[{showMarker:false}],
          dataRenderer: $.jqplot.ciParser,            
          axes: {
              xaxis: {
                  renderer:$.jqplot.CategoryAxisRenderer,                     
              }
          },

        });
4

1 に答える 1

0

ciParser Renderer Plugin をデータ形式要件で動作させることができませんでした。

次の jsFiddle では、JSON オブジェクトを、折れ線グラフを表示するために必要なデータ構造に変換する実際の例を示しています。

JSFiddle

// get array with both series
arSeries = [jsonData1, jsonData2];

// initalizat the output array for jqPlot
arJQ = [];

// for each Data Series 
for (var z = 0; z < arSeries.length; z++)
{
    // array for the prices
    jqPrices = [];
    var prices = arSeries[z].PriceTicks;
    for (var i = 0; i < prices.length; i++)
    {
        jqPrices.push([prices[i].TickDate.toString(), prices[i].Price]);
    }
    // Result [["Jan",1.5],["Feb",2.8],["Apr",3.9],["Dec",9.1]]
    // add to series array
    arJQ.push(jqPrices);
}

線が逆行しないようにするには、日付をより細かく指定するか、各データ レコードで同じティックを使用して指定する必要があります。

于 2013-07-09T15:08:23.190 に答える