ChartJS（雷达） - 将基准刻度 position 设置为“0”值

Question

Using chart.js ( v3.7.0 )使用 chart.js ( v3.7.0 )

Set up a Radar chart using multiple datasets that include 0 values (and needs to be kept as 0 for tooltip & data purposes).使用包含0值的多个数据集设置雷达图（出于工具提示和数据目的，需要将其保留为0 ）。

Trying to find a way to set/include a drawn tick marker for 0 values on the chart that do not all collide at the center of the graph ( 0 is a viable data value itself for this project).试图找到一种方法来为图表上的0值设置/包含绘制的刻度标记，这些值并不都在图表的中心发生碰撞（ 0本身就是该项目的可行数据值）。

beginAtZero option has no effect whatsoever on the initial tick display position. beginAtZero选项对初始刻度显示 position 没有任何影响。

Is this what's supposed to happen with the beginAtZero option, and there's been some sort of regression?这是beginAtZero选项应该发生的事情，并且有某种回归吗？ If not, is this even possible with chart.js?如果没有，chart.js 甚至可以吗？

Options:选项：

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

Sample Data:样本数据：

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
      }
    ],
  }

Tried:试过：

[Negative Min Values] - When attempting to use a negative value for min , it leaves some sort of masking on the pathing fills. [负最小值] - 当尝试对min使用负值时，它会在路径填充上留下某种掩蔽。 Used in combination with some other visual property settings, but nothing seemed to resolve.与其他一些视觉属性设置结合使用，但似乎没有解决任何问题。 (RESOLVED - See below) （已解决 - 见下文）

负最小值图

Thanks in advance!提前致谢！

[PERSONAL SOLUTION] [个人解决方案]

In combination with @LeeLenalee 's answer , I was able to identify my own personal issue with the "masking" from the paths.结合@LeeLenalee的回答，我能够通过路径中的“掩蔽”来识别我自己的个人问题。 Using negative min value does indeed properly offset the starting value of the paths.使用负min确实可以正确偏移路径的起始值。 Furthermore, if a dataset has fill: true , it apparently also masks any pathing fills drawn outside the boundaries of the data (in this case, a negative min value).此外，如果数据集具有fill: true ，它显然还掩盖了在数据边界之外绘制的任何路径填充（在本例中为负min ）。 After removing this property from each dataset, the paths fill correctly.从每个数据集中删除此属性后，路径将正确填充。

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

Easyest way to achieve this is by setting your min to the negative of your stepSize like so:实现这一点的最简单方法是将 min 设置为 stepSize 的负数，如下所示：

 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（雷达） - 将基准刻度 position 设置为“0”值

问题描述

[PERSONAL SOLUTION] [个人解决方案]

1 个解决方案

解决方案1
0 已采纳 2022-01-12 10:26:32

ChartJS（雷达） - 将基准刻度 position 设置为“0”值

问题描述

[PERSONAL SOLUTION] [个人解决方案]

1 个解决方案

解决方案1 0 已采纳 2022-01-12 10:26:32

解决方案1
0 已采纳 2022-01-12 10:26:32