ChartJS 图表js轴填充

yvt65v4c  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(272)

我想使用镜像选项,以便在图形“内部”显示y轴值:

现在的问题是x轴应该从这些值之后开始,但我不能移动它们。
该图表是使用以下代码构建的:

this.chart = new Chart(this.canvas.nativeElement, {
      type: 'bar',
      data: data,
      options: {
        scales: {
          x: {
            stacked: true,
            grid: {
              display: false,
              drawBorder: false
            },
            ticks: {
              color: '#333',
              font: {
                weight: 'bold'
              },
              maxRotation: 0,
              maxTicksLimit: this.loadLabels()?.length / 2
            },
            bounds: 'ticks'
          },
          y: {
            type: 'linear',
            beginAtZero: true,
            stacked: true,
            title: {
              display: false,
            },
            display: true,
            grid: {
              display: true,
              drawBorder: false,
              lineWidth: 1,
              borderColor: 'rgb(244, 244, 244, 0.7)',
              color: 'rgb(244, 244, 244, 0.7)'
            },
            ticks: {
              display: true,
              maxTicksLimit: 5,
              mirror: true,
              callback: (val) => formatCurrency(+val, 'it', getCurrencySymbol(this.currency, 'narrow'), this.currency)
            }
          }
        }
      },
    });

我尝试了paddinggrace两个选项都没有成功。。有人知道怎么做吗?

qncylg1j

qncylg1j1#

可以按如下方式定义y.ticks.padding

y: {
  ticks: {
    ... 
    padding: -50
  }
}

除此之外,您还需要定义layout.padding.left,以确保刻度标签仍显示在canvas上。

options: {
  layout: {
    padding: {
      left: 100
    }
  }
  ...

显然,您需要根据自己的需要调整数字。
有关详细信息,请参阅Chart.js文档中的Tick Configuration and Padding。

相关问题