jquery - 将条形与 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

我不得不将我的 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]];

Answer 2

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