ChartJS 图表JS数据标签被削减

smdnsysy 于 2023-11-18 发布在 Chart.js

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

我正在使用带有数据标签插件的Chart JS，我想在条形图和饼图旁边显示数据标签，但注意到一些数据标签正在被剪切或从画布中消失。他们有什么方法可以解决这个问题吗？

var chartData3 = {
        labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [{
      backgroundColor: "#79D1CF",
      data: [60, 90, 81, 56, 55, 40],
      datalabels: {
        align: 'end',
        anchor: 'end'
      }
    }]
  };

字符串
https://plnkr.co/edit/I906pCN8tdrrOX2hgN0W?p=preview
谢谢，MSK

chart.js

来源：https://stackoverflow.com/questions/50214709/chart-js-data-labels-getting-cut

3条答案

按热度按时间

hgb9j2n61#

您需要设置填充以正确显示标签。此外，调整画布的宽度和高度以考虑填充，以便图表不会太小。

options: {        
    layout: {
        padding: {
            left: 50,
            right: 50,
            top: 50,
            bottom: 50
        }
    }
}

字符串

赞(0）回复(0）举报 2023-11-18

uinbv5nw2#

设置图表中的最大刻度选项，例如：

this.chartOption.scales.yAxes[0].ticks.max = Math.max(...chartData3.datasets[0].data) * 1.2

字符串

赞(0）回复(0）举报 2023-11-18

sqxo8psd3#

我找到了一个解决方法。如果你设置为true，“ticks-display”属性会使画布变大以显示标签。之后，你可以设置ticks颜色与背景颜色相匹配，以隐藏ticks。

赞(0）回复(0）举报 2023-11-18

我来回答

ChartJS 图表JS数据标签被削减

3条答案

相关问题

热门标签

最新问答