用于水平条形图的 Chart.js 中 x 轴上的自定义标签/固定范围？

Question

我正在尝试为 Chart.JS 中的单个条形图、水平条形图设置固定范围

标签数组仅适用于垂直轴，但我希望在 X 轴上有一组固定的标签。

示例： https://altonwells.webflow.io/chart-js

 var ctx = document.getElementById('SATScoreGraph2').getContext('2d'); var myBarChart = new Chart(ctx, { type: 'horizontalBar', data: { labels: [""], datasets: [{ barThickness: 48, barPercentage: 0.7, categoryPercentage: 1.0, backgroundColor: ["#ff6f47"], data: [1480] }] }, options: { indexAxis: 'x', title: { display: false, text: 'Average SAT Score' }, legend: { display: true }, tooltips: { enabled: false } } });

 <html> <body> <canvas id="SATScoreGraph2"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> </body> </html>

Answer 1

阅读文档

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

options: {
indexAxis: 'x',
  title: {
    display: false,
    text: 'Average SAT Score'
  },
  legend: {
    display: true
  },
   tooltips: {
    enabled: false
  },
  scales: {
        xAxes: [{
            ticks: {
                suggestedMin: 800,
                suggestedMax: 1600
            }
        }]
    }
}

Answer 2

这对我有用

options: {
    scales: {
        x: {
            min: 0,
            max: 100,
            display: false,
        },
    }
}

显示等于 false 设置，因为如果不是，它会在我为数据选择的比例尺下方出现另一个比例尺。 根据文档：

min：用户定义的最小刻度数，覆盖数据中的最小值。

max：用户定义的比例最大数量，覆盖数据中的最大值。

用于水平条形图的 Chart.js 中 x 轴上的自定义标签/固定范围？

问题描述

2 个解决方案

解决方案1
0 2020-07-05 16:28:12

解决方案2
0 2021-08-11 16:43:01

用于水平条形图的 Chart.js 中 x 轴上的自定义标签/固定范围？

问题描述

2 个解决方案

解决方案1 0 2020-07-05 16:28:12

解决方案2 0 2021-08-11 16:43:01

解决方案1
0 2020-07-05 16:28:12

解决方案2
0 2021-08-11 16:43:01