如何在打字稿中将 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]
        }
      }

呈现为

对于打字稿，有一些 angular 组件，例如 https://www.npmjs.com/package/angular-gauge。我找不到一个不加修改就显示多个变量的。

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

或 enter link description here

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

How to make a C3 donut chart to a semi circle or a half donut chart in typescript?

charts

d3.js

donut-chart

typescript

c3.js