使用Chartjs雷达 - 如何修改灰色网格线？

Question

我在反应应用中使用react-chartjs-2进行了以下Chart.js雷达图渲染：

          <Radar
            data={chartData}
            options={{
              legend: false,
              gridLines: {
                 display: false,
              },
              scale: {
                gridLines: {
                  color: ['white', 'white', 'white', 'white', 'white', 'white', 'white', 'white']
                },
                pointLabels :{
                  fontSize: 12,
                },
                ticks: {
                  suggestedMin: 0,
                  suggestedMax: 10,
                  display: false,
                  maxTicksLimit: 5
                }
              }
            }}
          />

如何隐藏灰线和/或将颜色修改为白色？

Answer 1

尝试将angleLines添加到scale配置中。这个JSFiddle提供了许多配置更改的示例。

scale: {
    angleLines: {
        color: 'white' // lines radiating from the center
    }
}

Answer 2

如果你想隐藏灰线，

options: {
    scale: {
      gridLines: {
        color: 'transparent'
      },
      angleLines: {
        color: 'transparent' 
      }
    }
  }
};

现在，如果您想将线条设为白色，只需将颜色从透明变为白色

即可