Chartjs圆环剪切选项不起作用

tkqqtvp1 于 2023-01-20 发布在 Chart.js

关注(0)|答案(2)|浏览(123)

我已经将chartjs和ng 2-charts从2-* 升级到最新版本。更新后的软件包在属性方面遇到了一些问题，并修复了这些问题。但是在甜甜圈图中，剪切选项不起作用。根据文档，我尝试了像素和百分比。
下面是示例代码
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<...>>'.

我找不到实际的问题。有人能帮助解决这个问题吗？

chart.js

来源：https://stackoverflow.com/questions/75144609/chartjs-doughnut-cutout-option-not-working

2条答案

按热度按时间

2guxujil1#

cutout是dataset的属性。可以针对每个数据集进行设置...

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

...或（如您所希望的那样）针对图表中的所有数据集：

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

赞(0）回复(0）举报 2023-01-20

8yparm6h2#

试试这个

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

赞(0）回复(0）举报 2023-01-20

我来回答

Chartjs圆环剪切选项不起作用

2条答案

相关问题

热门标签

最新问答