Jquery jqplot:使用多个系列条将条与标签对齐
我无法将条形图与标签对齐。这是因为我有多个系列 我需要: 1) 带5个方框的条形图 2) 每个框代表单独的项目,应具有单独的颜色 3) 图例中应有5个项目 4) 条形图应与标签对齐(在最佳解决方案中,条形图应宽) 我已经取得了前三名,但我不能取得第四名 以下是我所拥有的:Jquery jqplot:使用多个系列条将条与标签对齐,jquery,html,css,jqplot,Jquery,Html,Css,Jqplot,我无法将条形图与标签对齐。这是因为我有多个系列 我需要: 1) 带5个方框的条形图 2) 每个框代表单独的项目,应具有单独的颜色 3) 图例中应有5个项目 4) 条形图应与标签对齐(在最佳解决方案中,条形图应宽) 我已经取得了前三名,但我不能取得第四名 以下是我所拥有的: var chartData = [ [['Portfolio Risk', 1]], [['Model Risk', 4]], [['Recovery Risk', 3]], [['Capabi
var chartData = [
[['Portfolio Risk', 1]],
[['Model Risk', 4]],
[['Recovery Risk', 3]],
[['Capability Risk', 1]],
[['Forward flow risk', 5]]
];
var ticks = ['Portfolio Risk', 'Model Risk', 'Recovery Risk', 'Capability Risk', 'Forward flow risk'];
plot2 = $.jqplot('chart1', chartData, {
seriesColors: ['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: 90
},
},
yaxis: {
tickOptions: {
formatString: '%d'
},
max: 5,
min: 0
}
},
legend: {
show: true,
placement: 'outside',
labels: ticks
},
});
JSFiddle:
正如您所看到的,条形图没有对齐。只需在序列默认值中添加几个选项即可完成此操作,如下所示:
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 60,
barPadding: -60
}
请注意,如果要使条形居中,只需将barPadding值设为barWidth值的负值即可。在本例中,我将宽度设置为60,然后将填充设置为-60 所以钢筋的对齐才是真正的问题?是的,对齐才是问题所在。首选解决方案应使所有钢筋更宽,并以标签为中心。