在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]];