0

JSON のテストとしてレンダラー関数を作成しようとしています。jqplot のサンプル コードは 1 行で問題なく動作しますが、既存のデータ (4 つの異なるプロット、2 つの折れ線、2 つの棒グラフ) を JSON の読み込みで置き換えられるようにしたいと考えています。

テスト レンダリング関数の例を以下に示します (COS/SIN データをテスト チャートに返すように簡略化しています)。

var SampleLine = function()
{
    var data=[[]];
    for(var i=0; i<13; i+=0.5)
    {
        data[0].push([i, Math.sin(i)]);
    }
    return data;
};

var SecondLine = function()
{
    var data=[[]];
    for(var i=0; i<13; i+=0.5)
    {
        data[0].push([i, Math.cos(i)]);
    }
    return data;
};

var plot3 = $.jqplot('chartdiv', [],
        {
            title:'JSON Test',
            dataRenderer: SecondLine,

            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    label:'Date',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    labelOptions: {
                        fontFamily: 'Georgia, Serif',
                        fontSize: '12pt'
                    },
                },
                yaxis:{
                    label:'Units',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    labelOptions: {
                        fontFamily: 'Georgia, Serif',
                        fontSize: '12pt'
                    },
                }
            },
            series:[
                {
                    showMarker:true,
                    markerOptions: { style:'circle' },
                },
                {
                    renderer:$.jqplot.BarRenderer,
                },
                {
                    renderer:$.jqplot.BarRenderer,
                },
                {
                    showMarker:true,
                    markerOptions: { style:'square' },
                },
            ],
        }
);

私の質問は、グラフの線と棒を組み合わせるためにさまざまなソースからのデータが必要なため、2 番目の dataRenderer を追加する方法です。配列のハード設定は機能しますが、AJAX/JSON でこれを実行して、DB やその他のソースからデータを取得しようとしています。

4

2 に答える 2

4

複数のdataRendererを追加する方法があるとは思いませんが、1つのdataRendererを使用して各シリーズを取得し、それをjqPlotに戻さないのはなぜですか?

dataRenderer を使用していない場合は、次のように 4 つのデータ シリーズを渡します。

    $.jqplot('chartdiv',  [dataSeries1, dataSeries2, dataSeries3, dataSeries4], {

したがって、dataRenderer関数を使用して各データシリーズを取得し、それぞれを配列に設定してから、セット全体を配列として返します-

    var retrieveData = function()
    {
      var dataSeries1=[];
      var dataSeries2=[];
      var dataSeries3=[];
      var dataSeries4=[];
      var returnData=[];

      //Populate each data array with values
      for(var i=0; i<13; i+=0.5)
      {
         dataSeries1[0].push([i, Math.cos(i)]);
      }

      //Populate dataSeries2, dataSeries3, dataSeries4
      ......
      //Add all to returnData array then return it

      return returnData;
    };

これが役に立てば幸いです。

于 2013-01-31T18:49:51.047 に答える
0

が何であるかわかりませんdataRenderer.JQPlot docも。

plot1.series 配列をいじって、シリーズを追加または削除できます。

ここに良いjsfiddleがあります：jsfiddle.net/fracu/HrZcj

アイデアは、データで配列を作成することです

for(var i=0 ; i<50 ; i++)
{
    myNewSerie = Array();
    x = (new Date()).getTime();
    y = Math.floor(Math.random() * 100);
    myNewSerie.push([x, y]);
}

次に、次に使用可能なスロットを使用してグラフに追加します

plot1.series[plot1.series.length] = myNewSerie

そして最後にplot1.replot();

フィドルの最後にある updateSeries 関数をチェックしてください

于 2013-01-15T17:27:20.903 に答える