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

时间:2015-02-09 17:09:55

标签: javascript jquery 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);
}   

1 个答案:

答案 0 :(得分:0)

您正尝试在ID为&#39; bar_one&#39;的div中绘制图表。但每次调用它来绘制同一div中的不同图形时,更好的选择是使用 for loop 动态创建div并将图形值传递给jqplot对象并附加 for < / strong>循环变量到用不同数据创建的id(为了创建每个div的唯一id)。