如何在 jqplot 条形图中放置多个条形图-java黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

614830

文章

312448514

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何在 jqplot 条形图中放置多个条形图

发布于2024-11-23 21:59 阅读(737) 评论(0) 点赞(17) 收藏(3)

我有使用 jqplot 制作的条形图，现在我想在 x 轴的每个点上画 3 个条形图。该怎么做？请查看此图像http://peltiertech.com/Utility/pix/clusterstackchart.png

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org  /TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

<div id="chat3" style="height:400px;width:300px; "></div>
<script type="text/javascript" src="plugins/jquery.js"></script>
<script type="text/javascript" src="plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>


<script type="text/javascript">

$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
    // Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
          // Put a 30 pixel margin between bars.
barMargin: 30,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
highlightMouseDown: true   
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}     
});
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});


</script>


</body>
</html>

解决方案

                    var s1 = [ 1, 2, 2, 3 ];
                    var s2 = [ 12, 32, 3, 12 ];
                    var s3 = [ 12, 32, 54, 64 ];
                    var ticks = [ 'Section1', 'section2', 'section3',
                            'section4' ];

                    plot2 = $.jqplot('chart3', [ s1, s2, s3 ], {
                        animate : !$.jqplot.use_excanvas,
                        seriesDefaults : {
                            renderer : $.jqplot.BarRenderer,
                            pointLabels : {
                                show : true
                            },
                            rendererOptions : {
                                barPadding : 8, // number of pixels between
                                // adjacent bars in the same
                                // group (same category or bin).
                                barMargin : 25, // number of pixels between
                                // adjacent groups of bars.
                                barDirection : 'vertical', // vertical or
                                // horizontal.
                                barWidth : 20, // width of the bars. null to
                            // calculate automatically.

                            }
                        },
                        series : [ {
                            label : 'X axis 1'
                        }, {
                            label : 'X axis 2'
                        }, {
                            label : 'X axis 3'
                        }, ],
                        seriesColors : [ "#efa229", "#245779", "#4BB2C5" ],
                        axesDefaults : {
                            base : 10, // the logarithmic base.
                            tickDistribution : 'even', // 'even' or 'power'.
                        // 'even' will produce
                        // with even visiual
                        // (pixel)
                        // spacing on the axis. 'power' will produce ticks
                        // spaced by
                        // increasing powers of the log base.
                        },
                        axesDefaults : {
                            tickRenderer : $.jqplot.CanvasAxisTickRenderer,
                            tickOptions : {

                                fontSize : '7pt'
                            }
                        },
                        axes : {
                            xaxis : {
                                renderer : $.jqplot.CategoryAxisRenderer,
                                ticks : ticks
                            },
                            yaxis : {
                                // Don't pad out the bottom of the data range.
                                // By default,
                                // axes scaled as if data extended 10% above and
                                // below the
                                // actual range to prevent data points right on
                                // grid boundaries.
                                // Don't want to do that here.
                                padMin : 0
                            }
                        },
                        tickOptions : {

                            fontSize : '7pt'
                        },
                        legend : {
                            show : true,
                            location : 'ne', // compass direction, nw, n, ne,
                            // e, se, s, sw, w.
                            xoffset : 12, // pixel offset of the legend box
                            // from the x (or x2) axis.
                            yoffset : 12, // pixel offset of the legend box
                            // from the y (or y2) axis.
                            placement : 'outside'
                        },
                        cursor : {
                            show : false,

                            showTooltip : true,
                            tooltipLocation : 'ne',

                        },
                        grid : {
                            background : 'white'
                        }
                    });

以上是我实现的在每个 x 点显示 3 条条形图的代码。希望对你有帮助

以下是有用的 js 和 css 文件

jquery.jqplot.min.css"

jquery.jqplot.min.js
jqplot.highlighter.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js"></script>
jqplot.cursor.min.js
jqplot.dateAxisRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js