Chart.js v3.2 将雷达背景形状从多边形三角形更改为圆形

Question

我有以下代码用 Chart.js 3.2

渲染三角形雷达图

const twoWeeksSentimentSummaryRadar = new Chart(twoWeeksSentimentSummaryRadarCtx, {
    type: 'radar',
    data: {
        labels: [
          'Positive',
          'Neutral',
          'Negative'
        ],
        datasets: [{
          label: 'Sentiment',
          backgroundColor: 'rgba(182,198,255,0.26)',
          borderColor: '#B6C6FF',
          borderWidth: 3,
          data: [curWeekPositiveSum, curWeekNeutralSum, curWeekNegativeSum]
        }]
    },
    options: {
            plugins: {
            legend: {
            display: false
          }
        },
        scales: {
            r: {
                ticks: {
                    maxTicksLimit: 6,
                    font: {
                    family: 'Helvetica Neue',
                    style: 'normal',
                    weight: 'normal',
                    size: 8,
                    lineHeight: '100%'
                  },
                  color: '#A6AAC2'
                },
                pointLabels: {
                    font: {
                    family: 'Helvetica Neue',
                    style: 'normal',
                    weight: 500,
                    size: 14,
                    lineHeight: '100%'
                  },
                  color: '#1C1C1C'
                }
            }
        }
    }
  });

如何将其背景形状转换为如下图所示的圆形？

有一个类似的票证 Is it possible to produce circular (round) shaped radar chart in Chart.js? 但如果我理解正确，该解决方案与以前的版本兼容

Answer 1

在选项中，您可以将网格设置为圆形：

const options = [
  {label: 'one', name: 'one'},
  {label: 'two', name: 'two'},
]

<Checkbox options={options} />

import React from 'react'
import {Checkbox as Cb} from '@material-ui/core'
import {Field, FieldAttributes, useField} from 'formik'

interface CheckboxRecord {
  label: string
  name: string
}

interface Props {
  options: CheckboxRecord[]
}

const Checkbox: React.FC<Props> = options => {
  return options.map(option => <Field name={option.name} as={Cb} />)
}

export default Checkbox

示例：

options: {
  scales: {
    r: {
      grid: {
        circular: true
      }
    }
  }
}

var options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      r: {
        grid: {
          circular: true
        }
      }
    }
  }
}

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