Как разместить текст на гистограмме morris.js

Ответ 1

Я только нашел этот вопрос, ища то же самое решение. Это сделано в javascript/jquery.

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

function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

var theData = [
    {mapname: 's1', value: 10, count: 3},
    {mapname: 's2', value: 4, count: 4},
    {mapname: 's3', value: 12, count: 13}
  ]

Morris.Bar ({
element: 'bar-example',
data: theData,
  xkey: 'mapname',
  ykeys: ['value'],
  labels: ['No. of days'],
  barRatio: 0.4,
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: function (row, series, type) {
    console.log("--> "+row.label, series, type);
    if(row.label == "s1") return "#AD1D28";
    else if(row.label == "s2") return "#DEBB27";
    else if(row.label == "s3") return "#fec04c";
  }
});

var items = $("#bar-example").find( "svg" ).find("rect");
$.each(items,function(index,v){
    var value = theData[index].count;
    var newY = parseFloat( $(this).attr('y') - 20 );
    var halfWidth = parseFloat( $(this).attr('width') / 2 );
    var newX = parseFloat( $(this).attr('x') ) +  halfWidth;
    var output = '<text style="text-anchor: middle; font: 12px sans-serif;" x="'+newX+'" y="'+newY+'" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px" font-family="sans-serif" font-weight="normal" transform="matrix(1,0,0,1,0,6.875)"><tspan dy="3.75">'+value+'</tspan></text>';
    $("#bar-example").find( "svg" ).append(parseSVG(output));
});

Вывод выглядит так.

Но то, что вы можете попробовать, это изменить значения здесь

var newY = parseFloat( $(this).attr('y') - 20 );

что-то вроде

var halfHeight = parseFloat( $(this).attr('height') / 2 );
var newY = parseFloat( $(this).attr('y') - halfHeight );

Это изменение не проверено, но послужит хорошей отправной точкой.

С уважением :)

Ответ 2

Вы можете расширить Morris для достижения этого. Пожалуйста, обратитесь к этому answer, чтобы увидеть полный рабочий фрагмент.

Добавить объект:

Bar.prototype.defaults["labelTop"] = false;

Добавьте прототип, чтобы нарисовать метку:

Bar.prototype.drawLabelTop = function(xPos, yPos, text) {
    var label;
    return label = this.raphael.text(xPos, yPos, text)
        .attr('font-size', this.options.gridTextSize)
        .attr('font-family', this.options.gridTextFamily)
        .attr('font-weight', this.options.gridTextWeight)
        .attr('fill', this.options.gridTextColor);
};

Измените protoype Bar.prototype.drawSeries, добавив эти строки (до последнего):

if (this.options.labelTop && !this.options.stacked) {
    label = this.drawLabelTop((left + (barWidth / 2)), top - 10, row.y[sidx]);
    textBox = label.getBBox();
    _results.push(textBox);
}

Затем установите для свойства labelTop значение true в конфиге Morris Bar:

labelTop: true

Ответ 3

Я считаю, лучше передать через JQuery на пустой р

Это окончательный результат: Окончательный результат

Это мой код:

HTML

<div class="row">
   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
      <p class="numero num1"></p>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
      <p class="numero num2"></p>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
      <p class="numero num3"></p>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
      <p class="numero num4"></p>
   </div>
 </div>

JS ниже кода диаграммы. Не забудьте заменить переменную Data на ту, которую вы используете в своем коде.

 var b=1;
   jQuery('rect').each(function (i) {
      $('p.num'+b).text(theData[i].value); 
      b++;
    });

CSS

.numero{
  text-align: center;
  font-size: 18px !important;
  font-weight: 600 !important;
}

Я также добавил класс для каждого цвета.

Надеюсь, это кому-нибудь поможет :) Удачного кодирования!

Ответ 4

Попробуйте разместить этот код в CSS

.morris-hover{position:absolute;z-index:1000;}

Ответ 5

Вот начало, его немного взломано, но он выполняет свою работу:

JS

    var graphData= [
    {mapname: 's1', value: 10, count: 3},
    {mapname: 's2', value: 4, count: 4},
    {mapname: 's3', value: 12, count: 13}
  ]; //store this to its own var so we can access the counts later


var bar=Morris.Bar ({
  element: 'bar-example',
  data:graphData,
  xkey: 'mapname',
  ykeys: ['value'],
  labels: ['No. of days'],
  barSizeRatio:0.4, //I think you meant barSizeRatio, not barSize
  xLabelAngle: 35,
  hideHover: 'auto',
  barColors: function (row, series, type) {
    //console.log("--> "+row.label, series, type);
    if(row.label == "s1") return "#AD1D28";
    else if(row.label == "s2") return "#DEBB27";
    else if(row.label == "s3") return "#fec04c";
  }
});


//first, find the width of a bar
//this is bar-example width, divided by three, times barSizeRatio
var barWidth=($('#bar-example').width()/3)*(0.4);

//now each thru each bar (rect)

jQuery('rect').each(function (i) {
  var pos=$(this).offset();
  var top=pos.top;
  top-=20; //originate at the top of the bar

  //get the height of the bar
  var barHeight=bar.bars[i];
  top+=barHeight/2; //so we can now stick the number in the vertical-center of the bar as desired
  var left=pos.left;
  //move it over a bit
  left+=barWidth/2; 
  //-size of element...
  left-=10;//should approximately be horizontal center

  $div=jQuery('<div class="count" style="top:'+top+'px;left:'+left+'px;" />'); 
  $div.text(graphData[i].count); //get the count
  jQuery('body').append($div); //stick it into the dom
  console.log($div);
});

и некоторый CSS для стилей divs

CSS

.count{
  position:absolute;
  width:10px;
  height:20px;
  line-height:20px;
  color:white;
  font-weight:bold;
  }

надеюсь, вы сможете запустить с этим, чтобы создать точный эффект, который вы ищете

Ответ 6

@chiliNUT @abi1964 Я разместил несколько диаграмм, но у меня проблема с CSS. Данные, высота бара и т.д. Все работает отлично, но #s укладываются сверху. Я пробовал каждую итерацию позиции в CSS. Идеи или сценарий, как это исправить?

изображение нескольких графиков С# укладкой