Как отобразить значение после бара, используя chart.js

Question

Мой chart.js

var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
    labels: ['HTTPS Pages','HTTP Pages'],
    datasets: [{

        data: [ {{ $array_https_http[0] }}, {{ $array_https_http[1] }}],
        backgroundColor: [ 
            'rgb(81, 170, 120)',
            'rgb(198, 222, 208)'
        ]

    }]
},
options: {
    showAllTooltips: true,
    tooltips: {
          enabled: true,
          displayColors: false,
          yPadding: 20,
          xPadding: 30,
          caretSize: 10,
          backgroundColor: 'rgba(240, 240, 240, 1)',
          bodyFontSize: 16,
          bodyFontColor: 'rgb(50, 50, 50)',
          borderColor: 'rgba(0,0,0,1)',
          borderWidth: 1,
          cornerRadius: 0,
          yAlign: 'bottom',
          xAlign: 'center',
          position: 'custom',
          custom: function(tooltip) {
            if (!tooltip) return;
            // disable displaying the color box;
            tooltip.displayColors = false;
          },
          callbacks: {
            // use label callback to return the desired label
            label: function(tooltipItem, data) {
              return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
            },
            // remove title
            title: function(tooltipItem, data) {
              return;
            }
        }
    },
    responsive: false,
    legend: { display: false },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
            },
            gridLines: {
                display: false
            },
        }],
        xAxes: [{
            ticks: {
               stepSize:100
            }
        }],
    }
}
});

Мой код подсказок

Chart.Tooltip.positioners.custom = function(elements, position) {
if (!elements.length)
  return false;

var em = elements[0]._model;

return {
  x: em.x-((em.x-em.base)/2),
  y: em.y+em.height/4
}
}

Мой вывод

Мой ожидаемый вывод

Кто-нибудь может мне помочь, как поставить эти значения после бара, как на втором изображении.Я просто хочу отобразить значение, чтобы знать даже его ноль.Мои пользовательские всплывающие подсказки должны были показывать другое наведение, а не по умолчанию.Мы ценим всю вашу помощь и заранее благодарим.

Answer 1

Вы можете использовать плагин chartjs.datalabel для достижения этой цели.Я создал для вас скрипку -> http://jsfiddle.net/Labkrpf4/

Надеюсь, это поможет!

var ctx_1 = document.getElementById('https_http').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
  type: 'horizontalBar',
  data: {
    labels: ['HTTPS Pages', 'HTTP Pages'],
    datasets: [{

      data: [0, 430],
      backgroundColor: [
        'rgb(81, 170, 120)',
        'rgb(198, 222, 208)'
      ]

    }]
  },
  options: {
    showAllTooltips: true,
    tooltips: {
      enabled: true,
      displayColors: false,
      yPadding: 20,
      xPadding: 30,
      caretSize: 10,
      backgroundColor: 'rgba(240, 240, 240, 1)',
      bodyFontSize: 16,
      bodyFontColor: 'rgb(50, 50, 50)',
      borderColor: 'rgba(0,0,0,1)',
      borderWidth: 1,
      cornerRadius: 0,
      yAlign: 'bottom',
      xAlign: 'center',
      position: 'custom',
      custom: function(tooltip) {
        if (!tooltip) return;
        // disable displaying the color box;
        tooltip.displayColors = false;
      },
      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.yLabel + " : " + tooltipItem.xLabel;
        },
        // remove title
        title: function(tooltipItem, data) {
          return;
        }
      }
    },
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        },
        gridLines: {
          display: false
        },
      }],
      xAxes: [{
        ticks: {
          stepSize: 100
        }
      }],
    },
    plugins: {
      datalabels: {
        align: 'end',
        anchor: 'end',        
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderRadius: 4,
        color: 'white',
        formatter: Math.round
      }
    }
  }
});