jqPlot甜甜圈更改数据

时间:2013-06-07 15:17:08

标签: javascript jquery plot jqplot

我正在使用jqPlot插件绘制一些情节。当我决定更改绘图数据时遇到了问题,但我找不到可以执行此操作的函数。谁知道什么功能可以帮助我?

这是我的代码:

var musica = [
    ['IVA', 16],
    ['Tienda', 40.2],
    ['Discográfica', 22.4],
    ['Distribuidor', 4],
    ['La fabricación', 4],
    ['Derechos del autor', 4],
    ['Royalty para el artista', 9.4]
];
var plot1 = $.jqplot ('grafico_musica', [musica],
    {
        title: "Música",
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                dataLabelFormatString:'%.1f%',
                showDataLabels: true
            }
        },
        legend: {
            show:true,
            location: 'e'
        },
        highlighter: {
            show: true,
            formatString:'%s',
            tooltipLocation:'sw',
            useAxesFormatters: false
        }
    }
);

我试图通过这种方式更改数据属性,但它不起作用

plot1._plotData = peliculas;// peliculas is an array previously defined

使用此功能解决问题:

plot1.replot({data: [peliculas]});

2 个答案:

答案 0 :(得分:0)

这可能会有所帮助:

plot1.destroy();
plot1 = $.jqplot ('grafico_musica', [peliculas],
    {
        title: "Música",
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                dataLabelFormatString:'%.1f%',
                showDataLabels: true
            }
        },
        legend: {
            show:true,
            location: 'e'
        },
        highlighter: {
            show: true,
            formatString:'%s',
            tooltipLocation:'sw',
            useAxesFormatters: false
        }
    }
);

将以前的代码添加到函数中并在需要时调用。

希望有所帮助

答案 1 :(得分:0)

解决方案是销毁并重新创建情节:

function createChart(data1) {
    if (plot1) { plot1.destroy(); }
          plot1 = jQuery.jqplot ('chart', [data1], 
        {
            title: "Música",
            seriesDefaults: {
                renderer: $.jqplot.PieRenderer,
                rendererOptions: {
                    dataLabelFormatString:'%.1f%',
                    showDataLabels: true
                }
            },
            legend: {
                show:true,
                location: 'e'
            },
            highlighter: {
                show: true,
                formatString:'%s',
                tooltipLocation:'sw',
                useAxesFormatters: false
            }
        });
}

以下是一个工作示例http://jsfiddle.net/U2xef/