2

私はJQPlotと協力して、ここの例http://www.jqplot.com/tests/data-renderers.phpのように、データベースからデータを取得するグラフを生成しています。

チャートは正常に機能していますが、現時点ではシリーズラベルがハードコーディングされています。シリーズと同じように、このチャートを作成してデータベースのシリーズラベルも表示するにはどうすればよいですか？ラベル名を含む2番目のファイルに対して新しい呼び出しを行う必要があると思いますが、その方法がよくわかりません。何か案は？

これが私が使用しているコードです：

$(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 に答える