额外的数组字符串使用每个函数显示出来

Question

1。Original Example

2。Example

使用此site的条形图插件时遇到了一个奇怪的问题。 任何人都可以弄清楚为什么第一个div.largearea中的数组在第二个例子的左下角显示出来了吗？

当页面上只有一个div.largearea时，它根本没有任何问题，正如您在第一个示例中所看到的那样。

HTML：          

<div class="get" data-stats="10.3,'1','#222222'"></div>
<div class="get" data-stats="15.2,'2','#7D252B'"></div>
<div class="get" data-stats="13.1,'3','#EB9781'"></div>
<div class="get" data-stats="16.3,'4','#FFD2B5'"></div>
<div class="get" data-stats="14.5,'5','#4A4147'"></div></div>
<div class="largearea">
<div class="exampleSimple"></div>

<div class="get" data-stats="10.3,'Nov','#222222'"></div>
<div class="get" data-stats="15.2,'Dec','#7D252B'"></div>
<div class="get" data-stats="13.1,'Oct','#EB9781'"></div>
<div class="get" data-stats="16.3,'June','#FFD2B5'"></div>
<div class="get" data-stats="14.5,'May','#4A4147'"></div></div>

jQuery的：

$(function() {
    var arrayOfData = [];
    $('.largearea').each(function(){
        var getbar = $(this).find('.get'),
            getpie = $(this).find('.exampleSimple');
            getbar.each(function(){
             var getstats = $(this).data('stats').split(',');
              getstats[1] = getstats[1].replace(/'/g,'');
              getstats[2] = getstats[2].replace(/'/g,'');
              arrayOfData.push(getstats);
            });

        getpie.jqbargraph({
        data: arrayOfData 
    });
  });


});

Answer 1

我的猜测是因为它无法将多个图表绘制到同一个div中。当您使用类选择器时，它会尝试在该类的所有div上绘制相同的图表。

如果您需要绘制多个图表，则必须将它们渲染为不同的div，甚至为每个图表创建一个新的图表实例。

了解您是想绘制多个图表还是想要做什么

会有所帮助