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

我认为这个问题的关键是正确构建由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]]]

但你真正需要的是这样的（为了简洁省略了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] }; }

Answer 2

在javascript数组中读取您的值，并使用它来使用以下代码段显示图例中的值：

legend:{
    show: true,
    location: 'ne',
    placement: "outside",
    labels: companies
}

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

2 个答案: