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

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

我的第一个想法是编写函数并将数据传递给它，因为我需要创建条形图。我尝试了以下操作，但由于某种原因，它给了我一个No plot target specified的错误。

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

感谢所有看过这个的人！

我想每次我需要一个栏时，我都会在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>

外部JavaScript文件

 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);
}