图例对齐问题JQPlot

Question

各位朋友：

我们在对齐组条形图的图例时遇到了一些困难。

基本上，我们希望在单个原始图像中水平对齐图例，但图例出现在不同的行中

此外，传说与轴重叠我们尝试了marginTop，marginLeft，但没有任何效果。

代码

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.pieRenderer.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>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

<div id="chart2" style="height:400px;width:300px; "></div>

<script>

$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var s3 = [7, 5, 3, 3];
var ticks = ['a', 'b', 'c', 'd'];
plot2 = $.jqplot('chart2', [s1, s2, s3], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true,stackValue:true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
legend: {
renderer: jQuery.jqplot.EnhancedLegendRenderer,
show: true, 
location: 's',
placement: 'outside',
rendererOptions: {
numberRows: '1',
numberColumns: '3'
}
}

});
});

​

Answer 1

您需要加载enhancedLegendRenderer才能使用它：

<script type="text/javascript" src="plugins/jqplot.enhancedLegendRenderer.min.js"></script>

请看工作示例here (使用enhancedLegendRenderer作为外部资源)