Javascript 如何使用chart.js在条形图后显示值

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

我的输出

我的预期产出

---

有没有人可以帮助我如何把这些值放在第二张图片一样的条后。我只想显示这个值，甚至知道它的零。我的自定义工具提示是显示不同的悬停，而不是默认悬停。感谢您的帮助。

您可以使用chartjs.datalabel插件来满足需要。我为你创作了一把小提琴->

希望有帮助

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

---

您可以使用chartjs.datalabel插件来满足需要。我为你创作了一把小提琴->

希望有帮助

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

---

非常感谢你。你救了我一天。很高兴能帮上忙：）只是个奇怪的问题。我有一个画布，所有的输出都是零，它们在中心给我一个datalabels（不在左边），但是当我在数据中有一个值时，它工作得很好。我怎么能解决这个问题呢？我不明白，如果这个值为零，那么这个条就不会被画出来，标签是如何占据一个没有渲染的条的中心的。如果您看到插件选项，align属性决定接受开始、中心或结束的标签的位置。我更新我的内容。当它有一个值时，它工作得很好，但当它的所有0在一个画布插件都可以工作时，它处于中间位置。谢谢你所做的一切，非常感谢。你救了我一天。很高兴能帮上忙：）只是个奇怪的问题。我有一个画布，所有的输出都是零，它们在中心给我一个datalabels（不在左边），但是当我在数据中有一个值时，它工作得很好。我怎么能解决这个问题呢？我不明白，如果这个值为零，那么这个条就不会被画出来，标签是如何占据一个没有渲染的条的中心的。如果您看到插件选项，align属性决定接受开始、中心或结束的标签的位置。我更新我的内容。当它有一个值时，它工作得很好，但当它的所有0在一个画布插件都可以工作时，它处于中间位置。谢谢你所做的一切。