Question

我正在尝试使用插件http://workshop.rs/jqbargraph/显示和更新图表。该插件是在页面加载时启动的，但我需要允许用户更新为图表提供动力的数据。但是，每次启动更新事件时，此功能都会添加多个图表。我假设我需要以某种方式破坏插件的原始实例，然后再更新图表数据并重新启动它，但插件中没有任何内容可以允许这样做。

有人能告诉我需要添加到我的代码中才能使其正常工作吗？

            jQuery( document ).ready(function() {

                    var chartData = new Array([0]);
                     showChart(chartData);                  

                    jQuery('#update').live("click", function() {
                        var qtyArr = [];

                        jQuery('input[name=qty]').each(function(i) {

                              qty =  Number(jQuery(this).val());

                              if(qty > 0){
                                qtyArr.push(qty);
                              }

                         });



                        chartData = new Array(
                            [qtyArr]
                        );

                        showChart(chartData); 
                    });

               });

                 function showChart(chartData){

                    jQuery("#chart").jqBarGraph({
                        data: chartData,
                        width: 200,
                        height: 300
                    });               
                }

Answer 1

该插件的演示页面清除图表并按如下方式重新初始化：

$('#exampleSimple').html('');
$('#exampleSimple').jqbargraph({ data: arrayOfData });

.empty()也应该有用。

你可能想要 -

function showChart(chartData) {
    $('#chart').empty().jqBarGraph({
        data: chartData,
        width: 200,
        height: 300
    });
}

Answer 2

在调用插件之前调用empty()：

jQuery("#chart").empty().jqBarGraph({
  data: chartData,
  width: 200,
  height: 300
});

jquery阻止多个插件实例

2 个答案: