0

我正在尝试编写一个渲染器函数作为 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 从我的数据库和其他来源获取数据。

4

2 回答 2

4

我不相信有一种方法可以添加多个 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;
    };

希望这会有所帮助。

于 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 回答