ページ内の他の場所でのボタンクリックに基づいて、JSONを介してHighchartsチャートのデータをリロードしようとしています。最初は、デフォルトのデータセット(カテゴリごとの支出)を表示しますが、ユーザー入力に基づいて新しいデータをロードします(たとえば、月ごとの支出)。サーバーからJSONを出力する最も簡単な方法は、GETリクエストをPHPページに渡すことです。たとえば、$。get( '/ dough/includes/live-chart.php?mode = month '、ボタンのID属性からこの値を取得します。
ここに、デフォルトのデータ(カテゴリ別の支出)を取得するためにこれまでに持っているものがあります。ユーザー入力に基づいて、オンデマンドで完全に異なるデータを円グラフにロードする方法を見つける必要があります。
$(document).ready(function() {
//This is an example of how I would retrieve the value for the button
$(".clickMe").click(function() {
var clickID = $(this).attr("id");
});
var options = {
chart: {
renderTo: 'graph-container',
margin: [10, 175, 40, 40]
},
title: {
text: 'Spending by Category'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: $'+ this.y;
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if (this.y > 5) return '$' + this.y;
},
color: 'white',
style: {
font: '13px Trebuchet MS, Verdana, sans-serif'
}
}
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '50px',
top: '100px'
}
},
series: [{
type: 'pie',
name: 'Spending',
data: []
}]
};
$.get('/dough/includes/live-chart.php', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.Push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
どんな助けも大歓迎です
[〜#〜] edit [〜#〜]
Robodudeのおかげで更新されたJavascriptがあります。ジョン、あなたは私をここで正しい軌道に乗せている-ありがとう! AJAXリクエストからのチャート上のデータを置換する方法に困惑しています。$。get()に続くコードはサンプルコードからである可能性が高いことを認めなければなりません。実行時に何が起こっているかを完全に理解していない-おそらくデータをフォーマットするより良い方法があるのでしょうか?
グラフに新しいデータが読み込まれるようになりましたが、既にあるデータの上に追加されます。犯人は次の行であると思われます。
options.series[0].data.Push(data);
Options.series [0] .setData(data);を試しました。しかし、何も起こりません。明るい面では、AJAXリクエストは選択メニューの値に基づいて完璧に機能し、Javascriptエラーはありません。問題のコードは、次のチャートオプションです:
$.get('/dough/includes/live-chart.php?mode=cat', function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.Push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
$("#loadChart").click(function() {
var loadChartData = $("#chartCat").val();
$.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.Push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
});
});
});
EDIT 2これは、グラフの取得元の形式です。非常に単純なカテゴリ名と値で、それぞれに\ nが付いています。
Coffee, 4.08
Dining Out, 5.05
Dining: ODU, 5.97
Dining: Work, 38.41
Entertainment, 4.14
Gas, 79.65
Groceries, 228.23
Household, 11.21
Misc, 12.20
Snacks, 20.27
編集:以下の応答がより正確です!
https://stackoverflow.com/a/8408466/387285
http://www.highcharts.com/ref/#series-object
HTML:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set B
</SELECT>
<button id="change">Refresh Table</button>
<div id="container" style="height: 400px"></div>
Javascript:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
series: []
};
$("#change").click(function() {
if ($("#list").val() == "A") {
options.series = [{name: 'A', data: [1,2,3,2,1]}]
// $.get('/dough/includes/live-chart.php?mode=month'
} else {
options.series = [{name: 'B', data: [3,2,1,2,3]}]
// $.get('/dough/includes/live-chart.php?mode=newmode'
}
var chart = new Highcharts.Chart(options);
});
これは非常に単純な例です。ここにはファイルがありませんが、基本的な考え方は、ユーザーが見たいものの新しいオプションを選択するたびに、.seriesデータオブジェクトを置き換えることです。サーバーからの新しい情報を使用して、新しいHighcharts.Chart();を使用してチャートを再作成します。
お役に立てれば!ジョン
編集:
これを確認してください、私が過去に取り組んだことから:
$("table#tblGeneralInfo2 > tbody > tr").each(function (index) {
if (index != 0) {
var chartnumbervalue = parseInt($(this).find("td:last").text());
var charttextvalue = $(this).find("td:first").text();
chartoptions.series[0].data.Push([charttextvalue, chartnumbervalue]);
}
});
円グラフに追加する必要がある最初と最後のtdsの情報を含むテーブルがありました。各行をループし、値をプッシュします。注:円グラフには1つの系列しかないため、chartoptions.series [0] .dataを使用します。
他の答えは私にはうまくいきませんでした。私は彼らのドキュメントで答えを見つけました:
http://api.highcharts.com/highcharts#Series
このメソッドの使用( JSFiddleの例を参照 ):
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
// the button action
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});
新しいデータをプッシュする前に、古い配列をクリアする必要があります。これを実現する方法はたくさんありますが、私はこれを使用しました。
options.series[0].data.length = 0;
したがって、コードは次のようになります。
options.series[0].data.length = 0;
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.Push(data);
});
これで、ボタンをクリックすると、古いデータが削除され、新しいデータのみが表示されます。お役に立てば幸いです。
実際には、update
の方が適切な関数を選択する必要があります。
これは関数update
http://api.highcharts.com/highcharts#Series.update のドキュメントです
以下のようなコードを入力するだけです。
chart.series[0].update({data: [1,2,3,4,5]})
これらのコードは、Originオプションをマージし、変更されたデータを更新します。
正解は次のとおりです。
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.Push(data);
data = {};
});
「データ」配列をフラッシュする必要があります。
data = {};
いつでもJSONデータをロードできます
ここで私は名前空間としてチャートを定義しました
$.getJSON('data.json', function(data){
Chart.options.series[0].data = data[0].data;
Chart.options.series[1].data = data[1].data;
Chart.options.series[2].data = data[2].data;
var chart = new Highcharts.Chart(Chart.options);
});
areを使用して、プッシュを使用してデータをoption.seriesに動的にプッシュします..
options.series = [];
それをクリアします。
options.series = [];
$("#change").click(function(){
}
data = [150,300]; // data from ajax or any other way chart.series[0].setData(data, true);
setData
はredrawメソッドを呼び出します。