ChartJS（雷达）- 为“0”值设置基本刻度位置

Question

使用 chart.js (v3.7.0)

使用包含 0 值的多个数据集设置 Radar 图表（出于工具提示和数据目的，需要保持为 0）。

试图找到一种方法来 set/include 为图表上的 0 值绘制刻度标记，这些值不会全部在图表中心发生冲突（0 是一个可行的方法该项目的数据本身价值）。

beginAtZero 选项对初始报价显示位置没有任何影响。

这是 beginAtZero 选项应该发生的情况，并且出现了某种倒退？如果没有，这甚至可以用 chart.js?

选项：

options = {
    scales: {
      r: {
        min: 0,
        max: 99,
        beginAtZero: true,
        angleLines: {
          display: false
        },
        ticks: {
          display: false,
          stepSize: 33.333
        }
      }
    }
  }

示例数据：

data = {
    labels: [ 'Field 1', 'Field 2', 'Field 3', 'Field 4', 'Field 5', 'Field 6' ],
    datasets: [
      {
        label: 'Dataset 1',
        data: [ 10, 99, 0, 76, 0, 0 ],
        backgroundColor: 'rgba(255, 213, 117, 0.6)',
        borderColor: 'rgb(255, 213, 117)',
        fill: true
      },
      {
        label: 'Dataset 2',
        data: [ 99, 35, 0, 0, 54, 0 ],
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgb(54, 162, 235)',
        fill: true
      }
    ],
  }

尝试过：

[负最小值] - 当尝试对 min 使用负值时，它会在路径填充上留下某种掩蔽。与其他一些视觉属性设置结合使用，但似乎没有任何解决办法。 （已解决 - 见下文）

提前致谢！

[个人解决方案]

结合 @LeeLenalee's ，我能够通过路径的“屏蔽”识别我自己的个人问题。使用负 min 值确实正确地偏移了路径的起始值。此外，如果数据集具有 fill: true，它显然还会屏蔽在数据边界之外绘制的任何路径填充（在这种情况下，负 min 值）。从每个数据集中删除此属性后，路径会正确填充。

data = {
    labels: [ 'Field 1', 'Field 2', 'Field 3', 'Field 4', 'Field 5', 'Field 6' ],
    datasets: [
      {
        label: 'Dataset 1',
        data: [ 10, 99, 0, 76, 0, 0 ],
        backgroundColor: 'rgba(255, 213, 117, 0.6)',
        borderColor: 'rgb(255, 213, 117)',
        // -- fill: true
      }
    ],
  }

Answer 1

最简单的方法是将最小值设置为步长的负数，如下所示：

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Dataset 1',
        data: [10, 99, 0, 76, 0, 0],
        borderColor: 'pink'
      },
      {
        label: 'Dataset 2',
        data: [99, 35, 0, 0, 54, 0],
        borderColor: 'orange'
      }
    ],
  },
  options: {
    scales: {
      r: {
        min: -33.333,
        max: 99,
        beginAtZero: true,
        angleLines: {
          display: false
        },
        ticks: {
          display: false,
          stepSize: 33.333
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

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

ChartJS（雷达）- 为“0”值设置基本刻度位置

ChartJS (Radar) - Set base tick position for "0" value

javascript

charts

chart.js

[个人解决方案]