jqPlot - 条形图 - 将最高值设置为图表顶部答案

【问题标题】：jqPlot - bar graph - set highest value to top of the chartjqPlot - 条形图 - 将最高值设置为图表顶部
【发布时间】：2013-09-25 17:42:54
【问题描述】：

我有一个 jqplot 条形图，其中包含 3 个条形值。我试图使具有最高值的条在图表中一直向上伸展（类似于将此值设置为图表的顶部），并重新计算其他两个条的高度。这是我使用的代码：

        var value1 = 119, value2 = 91, value3 = 12;
        var s1 = [value1, value2, value3];
        var ticks = ['a', 'b', 'c'];

        plot7 = $.jqplot('chart7', [s1], {
            seriesColors:['#74b6e7', '#003246', '#e22a20'],
            gridPadding: {top:0, bottom:0, left:0, right:0},
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                shadow: false,
                rendererOptions: {
                    fillToZero: true,
                    barPadding: 0,
                    barMargin: 0,
                    barWidth: 51,
                    groups: 1,
                    varyBarColor: true
                },
                    //pointLabels: { show: false }
            },
            series:[
             {pointLabels:{
                show: true,
                labels:[ value1.toString(), value2.toString(), value3.toString()]
              }}],
            axes: {
                // yaxis: { autoscale: true },
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                },
                yaxis: {
                    min: 0,
                    max: value1
                }
            }
        });

CSS 代码：

        .jqplot-grid-canvas, .jqplot-xaxis, .jqplot-yaxis{ display: none;}
        .jqplot-point-label{ top: 129px!important; color: #fff;}
        #chart7{ width: 152px; height: 152px;}

图表如下所示：

我似乎不明白为什么第一个点标签没有显示在图表的第一个条形图上。我做错了什么？

【问题讨论】：

问题是，当 pointLabel 渲染器构建点标签时，它首先构建所有点标签，当它完成构建它检查是否有任何点标签超出图形高度/宽度，然后删除那些点标签。在您的情况下，您的第一个条形图的点标签超出了图形的高度。所以它会在我们做任何事情之前将其删除。尝试给它 's' 的方向，然后稍后更改 css

标签： javascript jquery css jqplot

【解决方案1】：

这将解决您的问题：

var value1 = 119, value2 = 91, value3 = 12;
var s1 = [value1, value2, value3];
var ticks = ['a', 'b', 'c'];

plot7 = $.jqplot('chart7', [s1], {
    seriesColors:['#74b6e7', '#003246', '#e22a20'],
    gridPadding: {top:0, bottom:0, left:0, right:0},
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        shadow: false,
        rendererOptions: {
            fillToZero: true,
            barPadding: 0,
            barMargin: 0,
            barWidth: 51,
            groups: 1,
            varyBarColor: true
        },
            //pointLabels: { show: false }
    },
    series:[
     {pointLabels:{
        show: true,
        labels:[ value1.toString(), value2.toString(), value3.toString()],
        location:'s',
        ypadding : 5,
        edgeTolerance : -1
      }}],
    axes: {
        // yaxis: { autoscale: true },
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {
            min: 0,
            max: value1
        }
    }
});

//modify the label positions
var height = $(".jqplot-series-canvas").attr("height");
$(".jqplot-point-label").css("top",height - 10);

【讨论】：