2

我正在使用 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

提前感谢您的回答！

4

2 回答 2

6

我认为这个关键是让 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] };
}
于 2013-02-07T07:47:38.613 回答
0

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

legend:{
    show: true,
    location: 'ne',
    placement: "outside",
    labels: companies
}
于 2015-11-25T15:28:43.517 回答