Question

我正在尝试将渲染器函数编写为JSON的测试。 jqplot的示例代码适用于单行，但我希望能够用JSON加载替换现有数据（4个不同的图，2行，2个条形图）。

以下是测试渲染函数的一个示例（简化为返回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' },
                },
            ],
        }
);

我的问题是如何添加第二个dataRenderer，因为我需要来自不同来源的数据来组合图形上的线条和条形图。难以设置数组，但我尝试使用AJAX / JSON来从我的数据库和其他来源获取数据。

Answer 1

我不相信有一种方法可以添加多个dataRenderer，但为什么不使用一个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;
    };

希望这有用。

Answer 2

我不知道什么是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功能

jqplot：如何使用JSON数据呈现器向图形添加2条不同的行

2 个答案: