Jqplot棒グラフがあり、ユーザーがドロップダウンリストの値を変更したときにグラフデータを変更します。これは機能しますが、問題は、ユーザーが値を変更するたびに棒グラフが重ねて再描画されることです。
全体を再度描画せずにバーを更新または再ロードするにはどうすればよいですか?設定するプロパティ値はありますか?
Ajax呼び出しに応じてグラフデータが変化します。
$.ajax({
url: '/Home/ChartData',
type: 'GET',
data: { Id: Id },
dataType: 'json',
success: function (data) {
$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
}});
function CreateBarChartOptions(xAxis) {
var optionsObj = {
title: 'Stat',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
},
yaxis: { min: 0 }
},
series: [{ label: 'A' }, { label: 'B'}],
seriesDefaults: {
shadow: true,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 8,
barMargin: 10
}
},
};
return optionsObj;
}
返信をいただければ幸いです。ありがとう。
新しいチャートを描画するときに、jqPlotの.replot()メソッドを呼び出します。 ajax呼び出しを次のように変更します。
$.ajax({
url: '/Home/ChartData',
type: 'GET',
data: { Id: Id },
dataType: 'json',
success: function (data) {
$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot();
}});
次のように、スクリプト内でチャートオブジェクトをグローバル変数として使用してみます。
var plot1 = $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
次に、成功したら、データ、axesScale、およびreplotを次のようにリセットします。
var newData = [['a',1],['b',2],['c',3]];
plot1.series[0].data = newData;
plot1.resetAxesScale();
plot1.replot();
参照: https://groups.google.com/group/jqplot-users/browse_thread/thread/59df82899617242b?pli=1
グラフを再描画する前に毎回、既存の1を破棄してください。
$.ajax({
url: '/Home/ChartData',
type: 'GET',
data: { Id: Id },
dataType: 'json',
success: function (data) {
if(plot)
{
plot.destroy();
}
var plot=$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
}});
以下は、ページをリロードせずに新しいデータでプロットを動的に更新する方法の完全な例です。
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>New data point</button>
<script type="text/javascript">
var storedData = [3, 7];
var plot1;
renderGraph();
$('button').click( function() {
doUpdate();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
function doUpdate() {
var newVal = Math.random();
storedData.Push(newVal);
renderGraph();
}
</script>
これはこの人の投稿の簡略版です: 動的ajaxデータを使用したJQPlot自動リフレッシュチャート
スクリプトで生成されたデータの答えを見つけるのにしばらく時間がかかったので、これをここに投稿します。上記のコードを組み合わせて使用しました。
スクリプトファイル内にplot3という名前のグローバル変数を作成しました。次に、以下の関数を作成しました。これがredrawブール値で呼び出されると、破壊して再描画する必要があるか、初めて描画する必要があるかを決定します。
コードの最初のビットは、jqgrid(別の関数で更新されています)からデータを取得し、配列を更新します。 2番目のビットは、データの長さに応じて、x軸上の間隔ティックを決定します。
function DrawGraph(bRedraw){
var testTimes = [];
testTimes = $('#polarizationTable').jqGrid('getCol', 'TestTime', testTimes, false);
var RdgA = $('#polarizationTable').jqGrid('getCol', 'RdgA', RdgA, false);
var RdgB = $('#polarizationTable').jqGrid('getCol', 'RdgB', RdgB, false);
var readingLineA = [];
for (var i=0; i<testTimes.length; i++){
readingLineA.Push([testTimes[i], RdgA[i]]);
}
var readingLineB = [];
for (var i=0; i<testTimes.length; i++){
readingLineB.Push([testTimes[i], RdgB[i]]);
}
var maxX = $("#testLength").val();
var lengthX = testTimes.length;
var tickIntervalX = Math.round(maxX/10);
if(bRedraw == true)
{
plot3.destroy();
bRedraw = false;
}
if(bRedraw == false)
{
plot3 = $.jqplot('chart3', [readingLineA, readingLineB],
{
title:'Graph',
series:[{label:'Reading - A'}, {label:'Reading - B'} ],
legend:{show:true, location:'se'},
// You can specify options for all axes on the plot at once with
// the axesDefaults object. Here, we're using a canvas renderer
// to draw the axis label which allows rotated text.
axes:{
xaxis:{
label:'Minutes',
syncTicks: true,
min: 0,
numberTicks: 10,
tickInterval: tickIntervalX,
max: maxX*1.1,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontSize: '12pt'
},
},
yaxis:{
label:'Data',
min: 0,
numberTicks: 10,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontSize: '12pt'
}
},
}
});
}
}
$( '#chart).html(' ');
グラフは、グラフが作成されるDIVです。
これでうまくいきます。
多分これは役立つでしょう。一方、私はreplotをまったく機能させるのに問題がありますが、dataRendererを使用しています。
$.ajax({
url: '/Home/ChartData',
type: 'GET',
data: { Id: Id },
dataType: 'json',
success: function (data) {
$('chartDiv').empty();
$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
}});
お役に立てれば
jQuery(document).ready(function(){
jQuery.ajax({
url: '/review_graphs/show',
type: 'GET',
success: function (data) {
var plot1 = jQuery.jqplot('chartDiv', [data,data],
{
title: 'Bianual Reviews percentage',
series:[
{
renderer:jQuery.jqplot.BarRenderer,
label:'Average',
stackSeries: true,
dragable: {color: '#ff3366',constrainTo: 'x'},
trendline:{show: false}
},
{
label:'Trend Line',trendline:{show: false}}
],
legend: {
show: true,
placement: 'outsideGrid'
},
axesDefaults: {
tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
axes: {
xaxis: {
renderer: jQuery.jqplot.CategoryAxisRenderer
}
}
});
}});
});