如何刷新jqplot条形图而不重绘图表

Question

我有一个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;
}

回复将受到高度赞赏.谢谢.

Answer 1

你想要做的是在绘制新图表时调用jqPlot的.replot()方法.将您的ajax调用更改为如下所示:

$.ajax({
        url: '/Home/ChartData',
        type: 'GET',
        data: { Id: Id },
        dataType: 'json',
        success: function (data) {

            $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot();
        }});

Answer 2

尝试将图表对象作为脚本中的全局变量:

var plot1 = $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));

然后成功重置数据,axesScale和重绘为:

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

Answer 3

每次重绘图形之前,只需销毁现有的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));
}});