jqplotを使用して、ページ上に一度に1つずつ表示する4つのチャートを描画します。私は、ページの読み込み時にすべてのグラフのすべてのデータを照会しました。私は隠しdivに3つの代替グラフを生成するためにデータを保存し、必要に応じてそれらを交換したい。非表示のページコンテンツに基づいてパラメータをjQuery関数に渡すことができません
たとえば、id = 'chartdiv'のグラフdiv内のコンテンツを切り替えるために使用するid = 'weight_chart'のボタンがあります。だから、私は.jsファイルに以下の機能を持っている：
$('#weight_chart').click(function(event) {
$('#chartdiv').html(""); // clears the div
graph_data = $('#weight-graph-data').html();
$.jqplot('chartdiv', graph_data);
});
のパラメータは、すべての隠されたのdivのid =「体重グラフ・データ」に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}}}
...私はすでに収集したパラメータの一部を取り...そして関数にそれを渡したいです。
私はクライアント側で初心者ですので、plsは忍耐強くてください。あなたの助けを前にありがとう。私はJSONで遊んとJavaScriptの変数にパラメータを入れてみました初期のフィードバック後
.................. UPDATE
が、変数のため区切り記号などが全体として含まれているため、動作していないようです。
私は、DBをajax経由で動的に再クエリーするという意図で全く異なるアプローチを試みました。私は正しく値のペア（2番目のjqPlotパラメータ）を正しく生成し、残りをハードコーディングしながらそのピースを挿入しようとしています。しかし、それはまだ動作しません。以下のコードをご覧ください。私は 'results_list'の値をテストしましたが、それは良いです。単に関数呼び出しの場所の値を代入すれば、それはうまく動作し、グラフを生成しますが、グラフが空白のようにコード化されています。確かにこのようなことを処理する方法がなければなりません。再度、感謝します。
$('.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,
dataType: 'json',
success: function(data) {
//alert(data);
var results_list = "";
$.each(data, function(i,result){
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}}});
}
});
});
.................... UPDATE 2
ありがとうビート-ビート - 私はあなたの更新を見て前に、私はちょうどそれを得ました。私はあなたのやり方もうまくいくと思いますが、今ここで働いている私の解決策があります：
ここでdee38として - JSON for jqPlot - 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は...
あなたのJSON文字列がちょうどあなたの要素のHTMLで表現されている場合は、おそらくjQueryのparseJSON機能を使用する必要が$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));
、私の編集を参照してください。 –
あなたの更新2では：[eval'を使用しない]（https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21）代わりに '$ .parseJSON'を使用してください。さらに良いことに、 'dataType： 'json''を' $ .ajax'に渡して、jQueryで自動的に行います。 – bfavaretto
私はもともとdataType jsonを渡そうとしていましたが、jqPlotはそこから何をしてもデータを処理できないようです。今私は自分のソリューションに記述されているようにデータを渡し、eval（data）を使うだけで完璧に動作します。手伝ってくれてありがとう。 – flamegri11ed