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

【问题标题】：How to place multiple bar in jqplot bar chart如何在jqplot条形图中放置多个条形图
【发布时间】：2013-06-12 05:32:03
【问题描述】：

我有使用 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>

【问题讨论】：

我有那个解决方案。但可以在几个小时后提供
好的，但是尽快...使用上面的代码，它只在 x 轴的一个点上给出一个条形图。我需要在 x 轴的一个点上 3 个条形图...检查我的图像链接兄弟。
重复stackoverflow.com/questions/9270945/…
你不能把这个问题称为重复的问题没有解决。所以即使我遇到了同样的问题，我检查了那个链接，但发现没有人解决他的问题。所以我不得不提出我的疑问。
我刚刚回答了最初的问题，尽管您可能会发现答案令人失望。您的重复问题应由受信任的用户关闭。

标签： java javascript jquery jqplot

【解决方案1】：

                    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

【讨论】：

等等兄弟..让我使用它并让你知道..无论如何谢谢..这是一个希望
还有一个疑问。我应该将哪个 js 文件导入到我的 html 文件中？
如果你想要另一种方式，请告诉我。我只是误解了图像并给出了另一个图表查询，其中每个 x 点都有 3 个单独的条
我很久以前就实现了，现在我只是在其中找到了这几行代码..所以我不能告诉你是哪个 js 文件。但现在包括所有条形图 js测试目的，还包括 categoryaxesrender js。（不确定名称）
好吧，伙计，一定让你知道..但要在这里待一段时间..所以我可以问你一些疑问，如果我这样做了:)