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

Question

我有一个 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;}

图表看起来像这样:

我似乎无法找出为什么第一个点标签没有显示在图表的第一个条上。我做错了什么？

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