2013-09-20 3 views
0

У меня есть гистограмма jqplot с 3-значными значениями в ней. Я попытался сделать планку с самым высоким значением, чтобы растянуться на диаграмме (что-то вроде установки этого значения в верхнюю часть диаграммы), а остальные две высоты баров будут пересчитаны. Это код, который я использовал:jqPlot - гистограмма - установить максимальное значение в начало диаграммы

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

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

enter image description here

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

+0

проблема, когда визуализатор pointLabel строит pointlabel, он первым строит все pointlabels, тем, когда его сделали строительство он проверяет, является ли какой-либо из pointlabel находится вне графика height/width, то он удаляет эти pointLabels. В вашем случае метка точки вашего первого бара находится за пределами высоты графика. поэтому он удаляет его, прежде чем мы сможем что-либо сделать. Попробуйте дать ему направление 's', а затем измените css позже. – Gyandeep

ответ

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); 
Смежные вопросы