Question

我试图使用json Data在jqplot中绘制多行我对jqPlot有疑问，我使用json数据在jqPlot中绘制图表。我有两套像这样的json数据

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等是我必须采用的类似方式的javascript数组调用json数据，我使用以下方式失败，请帮助我。

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

        });

Answer 1

我没有设法让ciParser Renderer插件符合您的数据格式要求。

在下面的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);
}

为了防止线路向后移动，您应该更加细化日期或在每条数据记录上使用相同的日期。

使用json Data在jqplot中绘制多行

1 个答案: