在jqPlot中将条与条标签对齐

Question

我无法将jqPlot的条与相应的标签对齐。 请查看我的图表图像。 如何确定条形在标签上方居中？

这是我用于绘制图表的代码：

function drawReadsChart(json) {
        var s1 = [['<%= GetText("Combo Total") %>', json.Data.Combo.Total]];
        var s2 = [['<%= GetText("Soil In Total") %>', json.Data.SoilIn.Uhf]];
        var s3 = [['<%= GetText("UHF") %>', json.Data.Combo.Uhf]];
        var s4 = [['<%= GetText("LF") %>', json.Data.Combo.Lf]];

        $.jqplot('chart', [s2, s3, s4, s1], {
            grid: {
                drawBorder: false,
                shadow: false
            },
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: { fillToZero: true, shadow: false },
                pointLabels: { show: true }
            },

            series: [
                { color: '#68BA38' },
                { color: '#68BA38' },
                { color: '#28C9DE' },
                { color: '#2895DE' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                },
                yaxis: {
                    padMin: 0
                }
            }
        });
    }

编辑：

我必须将所有4个系列放入1个意甲中。 然后一切都正确对齐。 为了能够分别为每个条分配颜色，我必须在BarRenderer上设置“ varyBarColor：true”，并指定“ seriesColors”。 毫无道理，但是行得通。

Answer 1

第一件事是您的div容器比通常需要的更大。 尝试减小其宽度。 您的标签默认以居中状态呈现，但是您可以将它们向左移动。您可以使用以下tickOptions: { labelPosition: 'middle' }移动它。 另请参阅此链接http://www.jqplot.com/tests/rotated-tick-labels.php

Answer 2

我不得不将我的4个系列合并为1个意甲。 像这样：

var bars = [['<%= GetText("Soil In Total") %>', json.Data.SoilIn.Uhf, 
['<%= GetText("UHF") %>', json.Data.Combo.Uhf], 
['<%= GetText("LF") %>', json.Data.Combo.Lf], 
['<%= GetText("Combo Total") %>', json.Data.Combo.Total]];