0

jqplot 棒グラフがあり、3 つの棒の値が含まれています。最高値のバーをチャートの一番上まで伸ばすようにし (この値をチャートの一番上に設定するようなもの)、他の 2 つのバーの高さを再計算しようとしました。これは私が使用したコードです：

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

グラフは次のようになります。

ここに画像の説明を入力

グラフの最初のバーに最初のポイント ラベルが表示されない理由がわかりません。私は何を間違っていますか？

4

1 に答える 1

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);
于 2013-09-21T17:40:06.170 に答える