Javascript 如何创建一个可以调用的函数，以使用JQplot显示多个条形图

我想创建一个可以在

HTML

页面中多次调用的函数，以便显示多个堆叠条形图。它们不可能都在同一个图表中，因为它们之间需要一堆其他内容

我的第一个想法是编写函数并在需要创建条时向其传递数据。我尝试了下面的方法，但由于某种原因，它给了我一个错误，

未指定绘图目标

我也不确定这是否是实现这一目标的最佳或最有效的方法

感谢所有看过这个的人

我想每次我需要一个栏时，我都会在HTML中插入下面的内容

<script>
    var id ='bar_one';  //I also tried document.getElementById('bar_one');
    var data1 = [[12, 1]];
    var data2 = [[5, 1]];
    var data3 = [[3, 1]];
    barBuilder(id, data1, data2, data3);
</script>
<div id='bar_one' style="height:75px;width:500px; "></div>

---

您正试图在id为“bar_one”的div中绘制图形，但每次调用它时，都会在同一div中绘制不同的图形，因此更好的选择是使用for loop动态创建div，并将图形值传递给jqplot对象，并将for循环变量附加到id中（以便为每个div创建唯一id）使用不同的数据创建

 function barBuilder(id, data1, data2, data3){  



        var options = {
            animate: true,
            animateReplot: true,
            stackSeries: true,
            seriesColors:['#007f00', '#00b200', '#00ff00'],
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                pointLabels: {show: true,location: 'w'},
                rendererOptions: { 
                    barMargin: 13,
                    barDirection: 'horizontal'},
            },
            axesDefaults:{
                tickOptions: {textColor: 'black'}
            },
            axes:{
                yaxis:{renderer: $.jqplot.CategoryAxisRenderer,
                    showTicks: false,
                    tickOptions: {showGridline:false, showMark:false}
                },
                xaxis:{showTicks:false,
                       show: false,
                       tickOptions:{showGridline: false},
                       rendererOptions:{drawBaseline:false}
                }
            },
            grid:{
                background:'transparent',
                drawBorder: false,
                shadow: false}
        };
         $.jqplot(id, [data1,data2,data2],options);
}