ChartJS 使用水平条中的tick.mirror,标 checkout 现两次

ccrfmcuu  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(130)

我试图创建一个水平条形图使用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版本。
我是不是漏掉了什么?谢谢你,谢谢!

vqlkdk9b

vqlkdk9b1#

假设您只想在条形图中显示y轴标签。
从文件来看,
如果配置的比例以x/y开头,则已删除默认比例覆盖。在配置中定义xAxes现在将创建第二个比例,而不是覆盖默认的x轴。
您应该使用默认的y轴y,而不是yAxis

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

Demo @ StackBlitz

相关问题