首页 文章

在jqPlot中将条形与条形标签对齐

提问于
浏览 次
0

我无法将jqPlot的条形与相应的标签对齐 . 请查看我的图表的图像 . 如何确保条形图位于标签顶部的中心？

Image showing misaligned bars

这是我用于渲染图表的代码：

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

EDIT:

我不得不将我的所有4个系列放入1个系列 . 然后一切正确对齐 . 为了能够单独为每个条指定颜色，我必须在BarRenderer上设置'varyBarColor：true'，并指定'seriesColors' . 没有任何意义，但它确实有效 .

jquery jqplot

2 回答

  • 0

    首先，你的div容器比通常需要的要大得多 . 尽量减少它的宽度 . 您的标签在默认情况下呈现为居中，但您可以向右移动它们 . 您可以使用此 tickOptions: { labelPosition: 'middle' } 来移动它 . 也请参考此链接http://www.jqplot.com/tests/rotated-tick-labels.php

    回复于
  • 0

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

相关问题