Fatal编程技术网
  • java/
  • Java 如何在jqplot条形图中放置多个条形图

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

java javascript jquery

Java 如何在jqplot条形图中放置多个条形图,java,javascript,jquery,jqplot,Java,Javascript,Jquery,Jqplot,我有一个条形图，它是使用jqplot完成的，现在我想在x轴的每个点上有3个条形图。怎么做呢。？请检查这张图片 在此处插入标题 $（文档）.ready（函数（）{ VarS1=[2,6,7,10]； VarS2=[7,5,3,4]； VarS3=[14,9,3,8]； plot3=$.jqplot（'chart3'，[s1，s2，s3]{ //告诉绘图人员堆叠条形图。 斯塔克系列：没错， captureRightClick:true， 系列默认值：{ 渲染器：$.jqplot.blunderer

我有一个条形图，它是使用jqplot完成的，现在我想在x轴的每个点上有3个条形图。怎么做呢。？请检查这张图片


在此处插入标题
$（文档）.ready（函数（）{
VarS1=[2,6,7,10]；
VarS2=[7,5,3,4]；
VarS3=[14,9,3,8]；
plot3=$.jqplot（'chart3'，[s1，s2，s3]{
//告诉绘图人员堆叠条形图。
斯塔克系列：没错，
captureRightClick:true，
系列默认值：{
渲染器：$.jqplot.blunderer，
渲染器选项：{
//在条之间放置30像素的边距。
利润率：30，
//按下鼠标按钮时高亮显示栏。
//禁用鼠标悬停时的默认高亮显示。
highlightMouseDown：对
},
点标签：{show:true}
},
轴线：{
xaxis：{
渲染器：$.jqplot.CategoryAxisRenderer
},
亚克斯：{
padMin:0
}
},
图例：{
秀：没错，
地点：'e'，
位置：“外部”
}     
});
//将侦听器绑定到“jqplotDataClick”事件
//info3元素的文本，以显示它是什么系列和类型
//与该点的数据一起单击。
$（“#图表3”）.bind（'jqplotDataClick'，
函数（ev、序列索引、点索引、数据）{
$（'info3'）.html（'series:'+seriesIndex+'，point:'+pointIndex+'，data:'+data'）；
}
);
});
以上是我实现的代码，用于在每个x点上显示3个条形图。希望您能找到这些帮助

下面是帮助完整的js和css文件 

jquery.jqplot.min.js
jqplot.highlighter.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js“>
jqplot.cursor.min.js
jqplot.dateAxisRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvas.min.js
以上是我实现的代码，用于在每个x点上显示3个条形图。希望您能找到这些帮助

下面是帮助完整的js和css文件 

jquery.jqplot.min.js
jqplot.highlighter.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js“>
jqplot.cursor.min.js
jqplot.dateAxisRenderer.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvas.min.js
我有这个解决方案。但几小时后可以提供好的，但尽快…使用上面的代码，它只在x轴的一个点上提供一个条..我需要在x轴的一个点上提供3个条..检查我的图像链接bro.如果问题没有解决，你的副本不能称这个为副本..所以即使我也遇到了同样的问题，我查看了那个链接，但发现没有人解决他的问题。所以我不得不提出我的疑问。我刚刚回答了最初的问题，尽管你可能会发现答案令人失望。你的重复问题应该由一个受信任的用户来解决。我有这个解决方案。但几小时后可以提供好的，但尽快…使用上面的代码，它只在x轴的一个点上给出一个条..我需要在x轴的一个点上有三个条..检查我的图像链接bro。你的重复不能在问题未解决的地方称这个为重复..所以即使我遇到了同样的问题，我检查了链接，但发现没有人解决他的问题。所以我不得不提出我的疑问。我刚刚回答了最初的问题，尽管你可能会发现答案令人失望。你的重复问题应该由一个值得信任的用户来解决。等等，兄弟。让我使用它，让你知道。无论如何，谢谢。这是一个希望和一个疑问。我应该将哪个js文件导入我的html文件？请让我知道你是否需要其他方式。例如，我只是误解了图像，并给出了另一个图表查询，其中每个x点有3个单独的barsi很久以前就实现了，而现在我只是在其中找到了这几行代码。所以我不能告诉你是哪个js文件。而是包括现在所有的条形图js都是测试用的，还包括categoryaxesrender js。（不确定名称）好的，伙计，一定要让你知道。但是，请稍等一下。如果我在做这件事的时候有什么疑问，我可以问你：）等等，兄弟。让我用一下，让你知道。无论如何，谢谢。这是一个希望，一个疑问。我应该将哪个js文件导入我的html文件？请让我知道你是否需要其他方式。例如，我只是误解了图像，并给出了另一个图表查询，其中每个x点有3个单独的barsi很久以前就实现了，而现在我只是在其中找到了这几行代码。所以我不能告诉你是哪个js文件。而是包括现在所有的条形图js都作为测试目的，还包括categoryaxesrender js。（不确定名称）好的，伙计，一定会让你知道的。但请在这里呆一段时间。因此，如果我在做这件事时遇到了一些疑问，我可以问你：） 
<!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'
                        }
                    });

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