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作为外部资源）

图例对齐问题JQPlot

1 个答案: