ren*_*thy 3 html css jquery jqplot
我无法将条形与标签对齐.这是因为我有多个系列.
我需要:
1)带有5个方框的条形图
2)每个盒子代表单独的项目,应该有单独的颜色
3)传说中应该有5个项目
4)条形图应与标签对齐(在最佳溶剂条形图中将是宽的)
我已经取得了前三名,但我无法取得第四名.
这是我有的:
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
},
});
Run Code Online (Sandbox Code Playgroud)
JSFiddle:http://jsfiddle.net/renatevidruska/27EPk/
如您所见,条形图未对齐.
这可以通过简单地向seriesDefaults添加一些选项来完成,如下所示:
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 60,
barPadding: -60
}
Run Code Online (Sandbox Code Playgroud)
请注意,如果要使条形图居中,只需将barPadding值设为barWidth值的负值即可.在这种情况下,我将宽度设置为60,因此我将填充设置为-60. 这是小提琴.