jqplot を使用して、ページに一度に 1 つずつ表示したい 4 つのグラフを描画しています。つまり、選択するボタンを使用してそれらを切り替えることができます。ページの読み込みに関するすべてのグラフのすべてのデータを照会しました。非表示の div に 3 つの代替グラフを生成するデータを保存し、必要に応じてそれらを交換したいと考えています。
たとえば、id='chartdiv' でチャート div のコンテンツを切り替えるために使用したい id='weight_chart' のボタンがあります。したがって、.js に次の関数があります。
$('#weight_chart').click(関数(イベント) {
$('#chartdiv').html(""); // div をクリアします
graph_data = $('#weight-graph-data').html();
$.jqplot('chartdiv', graph_data);
});
パラメータはすべて、非表示の div id='weight-graph-data' に html として保存されます。
これで、うまくいかない理由がなんとなくわかりました。文字列変数を使用してそのようなパラメーターを置き換えようとするのが問題です。ハードコードで実際のパラメーターを置き換えるだけなら...
$.jqplot('chartdiv', [[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'Body Mass Index',axes:{xaxis: {renderer:$.jqplot.DateAxisRenderer}}});
代わりに ...
$.jqplot('chartdiv', graph_data);
...それでうまくいきます。
では、後でイベントによってトリガーされたときに、ページの読み込み時に計算したパラメーターを渡すにはどうすればよいでしょうか。この段階で別のデータベース呼び出しを行う必要はありません。すでに収集したパラメータの一部を取得したいだけです...
すなわち
[[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}
...そしてそれを関数に渡します。
私はクライアント側の初心者なので、辛抱してください。よろしくお願いします。
.................. アップデート
最初のフィードバックに従って、JSON をいじってパラメーターを JavaScript 変数に入れてみましたが、変数全体に区切り文字などが含まれているため、機能していないようです。
そのため、ajax を介して DB を動的に再クエリすることを意図して、まったく異なるアプローチを試みました。値のペア (2 番目の jqPlot パラメーター) を正しく生成し、残りをハードコーディングしながらその部分を挿入しようとしています。しかし、それでもうまくいきません。以下のコードを参照してください。「results_list」の値をテストしましたが、良好です。関数呼び出しの場所の値を単純に置き換えると、正常に機能してグラフが生成されますが、示されているようにコーディングされているグラフは空白です。きっと、この種のことを処理する方法があるに違いありません。再度、感謝します。
$('.btn-graph').click(関数(イベント) {
var member_id = $('#member_id').val();
var dataString = 'graph_type=' + this.id + '&member_id=' + member_id;
//アラート(データ文字列);
//アラート (dataString); false を返す;
$.ajax({
タイプ: "ポスト",
URL: "/ajax_handler/graph_data.php",
データ: データ文字列、
データ型: 'json',
成功: 関数 (データ) {
//アラート(データ);
var results_list = "";
$.each(データ、関数(i、結果){
results_list = results_list + "['" + result.date + "'," + result.bmi + "],";
});
results_list = results_list.slice(0, -1)
$('#chartdiv').html("");
$.jqplot('chartdiv',[[ results_list ]],{ title:'My Weight',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}});
}
});
});
................... 更新 2
beetroot-beetroot に感謝します - あなたのアップデートを見る直前に入手しました。あなたの方法もうまくいくと思いますが、現在機能している私のソリューションは次のとおりです。
ここで dee38 に従って - jqPlot の JSON - php で名前と値のペアを作成する必要がありました。次に、小さな配列を 1 つの大きな配列に結合します。それをjson_encodeし、ajax経由で返します。次に、 ajax 成功関数で eval(data) を使用すると、すべて機能します。最終的な jquery 関数は次のとおりです。
$('.btn-graph').click(function(event) {
var member_id = $('#member_id').val();
var dataString = 'graph_type=' + this.id + '&member_id=' + member_id;
//alert(dataString);
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/ajax_handler/graph_data.php",
data: dataString,
success: function(data) {
$('#chartdiv').html("");
$.jqplot('chartdiv',eval(data),{ title:'BMI',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}});
}
});
});
そして、バックエンドの私のphpは...
$sql = mysql_query("SELECT * FROM stats WHERE id = '".$mid."'");
//Create an array with the results
$pairs=array();
while($v = mysql_fetch_object($sql)){
$pairs[$v->date] = (float) $v->bmi;
}
$result = array();
foreach ($pairs as $label => $value) {
$result[] = array($label,$value); // make a "small" array for each pair
}
echo json_encode(array($result));