ChartJS 水平条几乎不可见，Y 轴上有 50 条记录

Question

ChartJS(3.7.0) 有没有办法设置水平条的垂直粗细？或者更改缩放级别或其他内容？

我有一个包含 50 行的记录集，它应该显示 50 个水平条。但是当图表被渲染时。代表水平条的线几乎看不见。

我正在使用这个配置：

        const config = {
          type: 'bar',
          data: chart_data,
          options: {
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    barThickness: 20,  // number (pixels) or 'flex'
                    maxBarThickness: 22 // number (pixels)
                }]
            },
            indexAxis: 'y',
            plugins: {
              legend: {
                position: 'right',
              },
            }
          }
        };

我还在每个数据集中设置条形和最大厚度。同时将包含 标签的父级

的高度设置为较大的值 3200px。

谢谢

Answer 1

如果不查看您的更多代码，几乎不可能找出图表中条形的粗细与您期望的不符的原因。

然而，在使用 Chart.js v3 时，以下几点值得了解：

• scales.[x/y]Axes.barThickness 已移至数据集选项 barThickness
• scales.[x/y]Axes.maxBarThickness 已移至数据集 选项 maxBarThickness

More details can be found in the 3.x Migration Guide or in the Chart.js v3 documentation here.

请查看下面的可运行脚本，看看在您的情况下如何完成。

const data = [...Array(50)].map(e => ~~(Math.random() * 20 + 1));
const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '231, 233, 237', '75, 192, 192',   '151, 187, 205', '220, 220, 220', '247, 70, 74', '70, 191, 189', '253, 180, 92', '148, 159, 177', '77, 83, 96'];

new Chart('chart', {
  type: 'bar',
  plugins: [{
    beforeLayout: chart => chart.options.scales.y1.labels = chart.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
  }],
  data: {
    datasets: data.map((v, i) => ({
      label: i + 1,
      data: [{ x: v, y: i }],
      backgroundColor: 'rgba(' + colors[i % colors.length] + ', 0.4)',
      borderColor: 'rgb(' + colors[i % colors.length] + ')',
      borderWidth: 1,
      categoryPercentage: 1
    }))
  },
  options: {
    indexAxis: 'y',    
    plugins: {
      legend: {
        position: 'right',
      },
      tooltip: {
        callbacks: {
          title: () => undefined
        }
      }
    },
    scales: {
      y: {
      },
      y1: {
        offset: true,
        gridLines: {
          display: false
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="chart" height="600"></canvas>