jqplot: 使用多个序列条对齐柱状图标签

Question

我无法将标签与条形图对齐。这是因为我有多个系列。

我需要：

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
    },
});

JSFiddle: http://jsfiddle.net/renatevidruska/27EPk/

正如您所看到的，条形图并未对齐。

- renathy

---

那么，条形图的对齐是真正的问题吗？ - dreamweiver

是的，对齐是问题所在。首选解决方案将使所有条形更宽且居中带标签。 - renathy

Answer 1

这可以通过向您的seriesDefaults添加一些选项来实现，如下所示：

seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    rendererOptions: {
        barWidth: 60,
        barPadding: -60


    }

请注意，如果您想居中显示这些条形图，只需要将 barPadding 的值设置为 barWidth 值的相反数即可。在本例中，我将宽度设置为 60，因此我将填充设置为-60。 这里是代码链接。

- QuestionMarks