使用水平条中的tick.mirror,标签出现两次

问题描述 投票:0回答:1

我正在尝试使用 ChartJS 创建水平条形图,我希望在条形内添加标签。我正在使用的配置如下:

var chartElm = document.getElementById('chart-e117165e');
var chartObj = new Chart(chartElm, {
    type: 'bar',
    data: {
        labels: ["This is one reason","This is another reason","This will end the chat"],
        datasets: [{
            label: "Select",
            data: [299,296,296],
            backgroundColor: ["rgba(255, 99, 132, 0.5)","rgba(255, 159, 64, 0.5)","rgba(255, 159, 64, 0.5)"],
            borderWidth: 1
        }]
    },
    options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: true,
        title: {
            text: "Select",
            display: true,
        },
        scales: {
            yAxis: {
                ticks: {
                    mirror: true
                }
            }
        },
        events: [],
        legend: {
            display: true,
        },
        tooltips: {
            mode: ''
        },
        layout: {},
        animation: {}
    }
});

但出于某种原因,我在酒吧内外得到了两个标签:

我已经在使用最新的4.3.3版本。

我在这里遗漏了什么吗?谢谢!

javascript chart.js
1个回答
0
投票

假设您只想在条形图中显示 y 轴标签。

来自文档

如果配置的比例以 x/y 开头,则默认比例覆盖已被删除。在配置中定义 xAxes 现在将创建第二个比例,而不是覆盖默认的 x 轴。

您应该使用默认 y 轴

y
而不是
yAxis

scales: {
  y: {
    ticks: {
      mirror: true,
    }
  }
}

演示@StackBlitz

© www.soinside.com 2019 - 2024. All rights reserved.