jqPlot - гистограмма - установить самое высокое значение в верхней части графика

Question

jqPlot - гистограмма - установить самое высокое значение в верхней части графика

0

У меня есть гистограмма 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;}

и график выглядит следующим образом:

Кажется, я не могу понять, почему первая метка точки не отображается на первой строке графика. Что я делаю не так?

John Bale 20 сен. 2013, в 13:15

Источник

Теги:

javascript

jquery

css

jqplot

1 ответ

Ещё вопросы

Gyandeep · Answer 1 · 2013-09-21T15-30-00.000Z

это исправит вашу проблему:

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