У меня есть диаграмма 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();
}});
Попробуйте использовать объект диаграммы в качестве глобальной переменной в script как:
var plot1 = $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));
Затем при успехе reset данные, 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
Каждый раз, прежде чем перерисовывать график, просто уничтожьте существующий.
$.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));
}});
Мне понадобилось время, чтобы найти ответ для script сгенерированных данных, поэтому я собираюсь опубликовать это прямо здесь. Я использовал комбинацию вышеуказанного кода.
Я создал глобальный var с именем plot3 в моем файле script. Затем создайте нижеследующую функцию. Когда это вызывается с булевым перерисованием, он определяет, нужно ли мне сначала уничтожать и перерисовывать или рисовать.
Какой первый бит кода получает данные из моего jqgrid (который обновляется в другой функции) и обновляет массивы. Второй бит определяет мои интервальные тики на оси х, зависящие от моей длины данных.
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'
}
},
}
});
}
}
Вот полный пример того, как динамически обновлять график новыми данными без перезагрузки страницы:
<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>
Это упрощенная версия этого сообщения: Автоматическая обновленная диаграмма JQPlot с динамическими данными ajax
$( '# диаграмма).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
}
}
});
}});
});
Лучший метод, который я получил, - div, в котором вы рисуете, очистить, прежде чем рисовать новый график.
$('#graph_area).children().remove();