JQPlot:绘制来自外部源的系列和标签

Question

我正在使用JQPlot生成一个从数据库中提取数据的图表,例如http://www.jqplot.com/tests/data-renderers.php中的示例.

图表工作正常,但目前系列标签是硬编码的.如何使此图表显示数据库中的系列标签,就像系列一样？我假设我需要对包含标签名称的第二个文件进行新的调用,但我不确定该怎么做.有任何想法吗？

这是我正在使用的代码:

$(document).ready(function(){
var ajaxDataRenderer = function(url, plot) {
    var ret = null;
    $.ajax({
        async: false,
        url: url,
        dataType:'json',
        success: function(data) {
            ret = data;
        }
    });
   return ret;
};
var jsonurl = "./index.php";
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart1', jsonurl,{
    dataRenderer: ajaxDataRenderer,
    title: 'Annual Balance Summary',
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer},
    seriesDefaults: {lineWidth:4},
    **series:[{label:'Tilikausi 01/2009 - 12/2009'}, {label:'Tilikausi 01/2010 - 12/2010'}, {label:'Tilikausi 01/2011 - 12/2011'}]**, // THIS ARE THE VALUES I WANT TO BRING FROM THE DATABASE
        showMarker:true,
        pointLabels: { show:true },
    axes: {
        xaxis: {pad:1, numberTicks:12, tickInterval: 1, autoscale:true, tickOptions:{formatString:'%d', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal'}}},
        highlighter: {bringSeriesToFront: true}
        });
});

index.php的输出json数组如下所示:

[[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76],[4,409203.91],[5,392167.56],[6,547296.04],[7,529292.86],[8,523009.35],[9,541452.97],[10,535397.58],[11,555497.48],[12,465849.17]],[[0,465849.17],[1,464569.69],[2,468339.1],[3,471005.39],[4,470786.79],[5,472315.46],[6,492847.16],[7,495973.32],[8,520188.21],[9,550497.27],[10,544294.18],[11,559081.4],[12,479558.69]],[[0,479558.69],[1,467694.94],[2,459592.48],[3,476012.25],[4,463623.8],[5,487588.68],[6,445992.44],[7,457935.72],[8,481076.75],[9,498464.53],[10,508681.42],[11,523928.66],[12,548180.15]]]

系列标签的数组应该是这样的:

[["Tilikausi 01\/2009 - 12\/2009"],["Tilikausi 01\/2010 - 12\/2010"],["Tilikausi 01\/2011 - 12\/2011"]] // Array of series labels 

提前感谢您的回答!

Answer 1

我认为这个的关键是正确地获取JSON结构index.php.

目前你要归还这个:

[[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76],[4,409203.91],[5,392167.56],[6,547296.04],[7,529292.86],[8,523009.35],[9,541452.97],[10,535397.58],[11,555497.48],[12,465849.17]],[[0,465849.17],[1,464569.69],[2,468339.1],[3,471005.39],[4,470786.79],[5,472315.46],[6,492847.16],[7,495973.32],[8,520188.21],[9,550497.27],[10,544294.18],[11,559081.4],[12,479558.69]],[[0,479558.69],[1,467694.94],[2,459592.48],[3,476012.25],[4,463623.8],[5,487588.68],[6,445992.44],[7,457935.72],[8,481076.75],[9,498464.53],[10,508681.42],[11,523928.66],[12,548180.15]]]

但你真正需要的是这样的东西(values为简洁起见省略了一些元素):

{
    values: [[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76], ... [12,548180.15]]],        
    labels: [["Tilikausi2 01\/2009 - 12\/2009"],["Tilikausi2 01\/2010 - 12\/2010"],["Tilikausi2 01\/2011 - 12\/2011"]]
}

棘手的是,在创建图形时将标签分配给一系列.这会导致问题,因为它确实意味着必须在创建图形之前进行Ajax调用.

鉴于Json的结构如上所述,这样的事情可以解决问题:

$.jqplot.config.enablePlugins = true;
var jsonurl = "./index.php";
//Get the data prior to creating the graph.
var plotData = ajaxDataRenderer(jsonurl);

//plotData.values is now passed in to be the actual data the plot is created from.
plot1 = $.jqplot('chart1', plotData.values, {
    title: 'Annual Balance Summary',
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer},
    seriesDefaults: {lineWidth:4},
    //The series labels can now be supplied.
    series: plotData.labels,
    showMarker:true,
    pointLabels: { show:true },
    axes: {
        xaxis: {pad:1, numberTicks:12, tickInterval: 1, autoscale:true, tickOptions:{formatString:'%d', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal'}}},
        highlighter: {bringSeriesToFront: true}
});

编辑:

您需要做的另一件事是修改返回的labels数组.我们仍在使用该ajaxDataRenderer功能,因此在您收到数据后,您需要执行以下操作:

for(var i = 0; i < data.labels.length; i++) {
    data.labels[i] = { label: data.labels[i][0] };
}

所有这一切都是创建jqplot在指定标签时期望的对象文字.

编辑2:

如果你的JSON看起来像:

[[["Tilikausi 01\/2009 - 12\/2009"],["Tilikausi 01\/2010 - 12\/2010"],
  ["Tilikausi 01\/2011 - 12\/2011"]],[[[1,-4308.6],[2,-11725.18],[3,-23253.57],
    ...,[10,-85437.15],[11,-10??5465.7],[12,-129859.38]]]]

然后它仍然可以工作,但你需要以不同的方式引用事物.而不是plotData.values你会有plotData[1],而不是plotData.labels你会有plotData[0].

此外,标签重新排列代码将看起来像:

for(var i = 0; i < data[0].length; i++) {
    data[0][i] = { label: data[0][i][0] };
}