javascript - (如何)我们可以创建带有范围标签的半圆环图吗？

Question

我想创建这种半圆圆环图。

"series": [
    {
        "name": "xxx",
        "y": 4,
        "start": "50%",
        "end": "40%"
    },
    {
        "name": "yyy",
        "y": 10,
        "start": "40%",
        "end": "10%"
    },
    {
        "name": "zzz",
        "y": 9,
        "start": "10%",
        "end": "-15%"
    }
]

起始点和结束点数据标签也必须像在图像中一样显示在图表中。是否可以？

http://jsfiddle.net/hrvp3gj9/

Answer 1

Here是使用 ZingChart 的解决方案。这使用了两个图表的组合:饼图和仪表图。

创建半个 donut 时，将 scale-r >光圈 属性设置为 180(形成半圆)，并将 plot > slice 属性设置为 80(这使得 donut 上有一个洞)。

直接放置在饼图上方的仪表图隐藏了大部分属性。但是，通过设置相同的孔径和切片值，我们可以更轻松地在图表周围放置标签。请注意 scale-r > item > Rules 数组，该数组用于通过使用 alpha(透明度)属性仅使某些项目可见，该属性设置为scale-r > item 对象中的 0。

我是 ZingChart 团队的成员，如果您有任何疑问，请告诉我:)