条形图内的文本- chart.js

vhipe2zx 于 2023-03-02 发布在 Chart.js

关注(0)|答案(3)|浏览(182)

我需要使用chart.js将文本写入图表中的条形图

var ctx = document.getElementById("myChart");
 var myChart = new Chart(ctx, {
     type: 'bar',
     data:data,
     options: {           
         scales: {
             yAxes: [{
                 ticks: {
                     beginAtZero:true
                 }
             }]
         }
     },
     responsive : true,
     showTooltips : false,
     showInlineValues : true,
     centeredInllineValues : true,
     tooltipCaretSize : 0,
     tooltipTemplate : "<%= value %>"
 });

上面的代码不工作...
我需要这样的东西：

chart.js

来源：https://stackoverflow.com/questions/37218702/text-inside-the-bar-chart-js

3条答案

按热度按时间

rmbxnbpk1#

您是否在代码中定义了var ctx = document.getElementById("myChart");。
更新
将以下代码添加到选项对象：

animation: {
  onComplete: function () {
    var chartInstance = this.chart;
    var ctx = chartInstance.ctx;
    console.log(chartInstance);
    var height = chartInstance.controller.boxes[0].bottom;
    ctx.textAlign = "center";
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      Chart.helpers.each(meta.data.forEach(function (bar, index) {
        ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y) / 2));
      }),this)
    }),this);
  }
}

https://jsfiddle.net/h4p8f5xL/
更新2
用具有所需宽度和高度的容器包围画布

<div style="width: 100%; height: 500px">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

并将以下内容添加到选项对象中

// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: false,

赞(0）回复(0）举报 2023-03-02

ttvkxqim2#

如果要为每个元素呈现居中文本，有一种更简单的方法：

Chart.helpers.each(meta.data.forEach(function (bar, index) {
    var centerPoint = bar.getCenterPoint();
    ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y));
}),this)

似乎**“getCenterPoint”在版本2.1.3**（您在示例中使用的）中不可用。我在2.5.0中尝试过，它可以正常工作

赞(0）回复(0）举报 2023-03-02

pieyvz9o3#

到目前为止，有一个插件可以完全处理这种用例！
它被称为chartjs-plugin-datalabels，文档可以在这里找到：https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html

赞(0）回复(0）举报 2023-03-02