如何将C3圆环图制作成打字稿中的半圆形或半圆形图表？

Question

是否可以通过使用起始角度和结束角度修改C3库代码来创建半圆形图表或半圆形圆环图表？

Trying to make something like the image in d3/c3 with typescript

Answer 1

甜甜圈只是一个带有空白中心的饼图。仪表更接近您显示的内容。 c3.js有一个gauge chart。

当值超过阈值时，刻度盘颜色会发生变化。 您想要显示多个参数，例如。 50％正在进行中，其中30％通过，20％未通过。这就像stacked图表，但以弧形显示。为此，您需要指定模式。

source code中有一些例子。试试这个：

this.chart = c3.generate({
      bindto: bindToThis,
      data: {
        columns: [
          ['padded1', 100],
          ['padded2', 90],
          ['padded3', 50],
          ['padded4', 20]
        ],
        type: 'gauge',
      },
      color: {
        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
        threshold: {
          values: [30, 80, 95]
        }
      }

呈现为

对于打字稿，有一些角度组件，如https://www.npmjs.com/package/angular-gauge。我无法找到一个显示多个变量而无需修改的内容。

另请参阅D3中的这些示例，可以修改这些示例以动态更改背景弧角度以跟踪测量变量。针是可选的。

How to customise Gauge needle pointer using D3.js or C3.js?

或Gauge D3.js display value at the top of the needle enter link description here