Chartjs 甜甜圈剪切选项不起作用答案

【问题标题】：Chartjs Doughnut cutout option not workingChartjs 甜甜圈剪切选项不起作用
【发布时间】：2023-01-18 23:11:59
【问题描述】：

我已将我的 chartjs 和 ng2-charts 从 2-* 升级到最新版本。更新包后，在属性中遇到了一些问题并修复了这些问题。但在 Doughtnut 图表中，cutout 选项不起作用。根据文档，我正在尝试像素和百分比。

这是示例代码

Chart Js Version - ^4.1.2 Ng2 Charts Version - ^4.1.1

chartOptions: ChartOptions = {
    scales: {
      x: {
        display: false,
      },
      y: {
        display: false
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    },
    cutout: '94%',
    responsive: false,
    maintainAspectRatio: false
  };

这是错误

Object literal may only specify known properties, and 'cutout' does not exist in type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>'.

我找不到实际问题。谁能帮忙解决这个问题？

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

cutout 是dataset 的属性。它可以为每个数据集设置...

{
  type: 'doughnut',
  data: {
    datasets: [{
      cutout:'40%'
      ...
    },
    {
      cutout:'90%'
      ...
    }]
  }
}

...或（正如您想要做的那样）图表中的所有数据集：

{
  type: 'doughnut',
  data: data,
  options: {
    datasets: {
      doughnut: {
        cutout:'90%'
      }
    }
  }
}

【讨论】：

【解决方案2】：

尝试这个

chartOptions: ChartOptions<'doughnut'> = {
    scales: {
      x: {
        display: false,
      },
      y: {
        display: false
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    },
    cutout: '94%',
    responsive: false,
    maintainAspectRatio: false
  };

【讨论】：