typescript - 如何在 typescript 中将 C3 圆环图制作成半圆或半圆环图？

Question

是否可以通过修改C3库代码的起始角和结束角来制作半圆环图或半圆圆环图？

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

Answer 1

donut 只是一个中心空白的饼图。仪表更接近您显示的内容。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]
        }
      }

呈现为

对于 typescript ，有一些角度组件，如 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