Canvas.js 圆环图厚度

Question

我目前正在使用 Canvas.JS 制作一些 甜甜圈 图表，但我找不到合适的方法来设置图表的厚度。

文档非常丰富（您可以去 over here 查看它们）但我似乎无法为我的 "problem".

找到合适的解决方案

现在我正在使用以下代码生成图表：

CanvasJS.addColorSet('circColors', [
  '#7583B2',
  '#E6866A'
]);

var circChartOptions = {
  animationEnabled: true,
  colorSet: 'circColors',
  data: [
    {
      labelFontColor: '#9EA4AC',
      labelFontFamily: 'Lato, sans-serif',
      labelFontWeight: 'normal',
      indexLabelLineColor: 'white',
      type: 'doughnut',
      startAngle:-90,
      toolTipContent: '{label}: {y} - <strong>#percent%</strong>',
      indexLabel: '{label} #percent%',
      dataPoints: [
        { y: 37.47, label: 'Mobile' },
        { y: 62.53, label: 'Desktop' }
      ]
    }
  ]
};

$('#circChart').CanvasJSChart(circChartOptions);

Canvas.JS 是否提供了一种控制图表厚度的方法？任何帮助将不胜感激。

谢谢！

Answer 1

看起来是硬编码的，所以你必须在 canvasjs 文件中更改它。

var widthPercentage = 0.60;

Answer 2

data: [
{
  labelFontColor: '#9EA4AC',
  labelFontFamily: 'Lato, sans-serif',
  labelFontWeight: 'normal',
  indexLabelLineColor: 'white',
  type: 'doughnut',
  innerRadius: "85%",
  startAngle:-90,
  toolTipContent: '{label}: {y} - <strong>#percent%</strong>',
  indexLabel: '{label} #percent%',
  dataPoints: [
    { y: 37.47, label: 'Mobile' },
    { y: 62.53, label: 'Desktop' }
  ]
}

使用innerRadius来控制tickness

Canvas.js 圆环图厚度

Canvas.js doughnut chart thickness

javascript

html

canvas

charts

canvasjs