时间戳

首页 > 解决方案 > ChartJS - 使用 datalabels 插件切断标签

javascript - ChartJS - 使用 datalabels 插件切断标签

问题描述

我有一个简单的条形图，我正在使用 datalabels 插件将标签放置在每个条形内部和顶部。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['One', "Two"],
    datasets: [{
      data: [40, .5],
      backgroundColor: [
        'rgba(255, 99, 132)',
        'rgba(54, 162, 235)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          max: 40
        },
      }],
      xAxes: [{
        maxBarThickness: 50
      }]
    },
    plugins: {
      datalabels: {
        display: true,
        anchor: 'end',
        align: 'top',
        color: 'white',
        offset: -30,
        font: {
          weight: 'bold',
          size: 14
        }
      }
    }
  }
});

但有时，我的值不会为标签留出足够的空间。请参阅 https://jsfiddle.net/myckxLun/1/上的第二个栏。

我想确保这些标签有 X 空间。我已经尝试minBarLength过 Y 轴 - 但这只是将条形长度强制为最小像素值并且不调整图形（即条形长度不准确）。

关于如何解决这个问题的想法？谢谢！

标签： javascriptchart.js

解决方案

推荐阅读