reactjs Apexcharts径向图逆时针进度条

vs91vp4v 于 2022-12-18 发布在 React

关注(0)|答案(3)|浏览(170)

我正在使用React Apexcharts创建一个径向图。默认情况下，进度条是顺时针方向的，但我需要它逆时针方向。是否有任何选项属性可供我使用？

图表现在的样子：

我需要它看起来像什么（酒吧去相反的方向）：

我的选项对象：

let options = {
        colors: ["#857EFF"],
        plotOptions: {
            radialBar: {
            hollow: {
                margin: 0,
                size: "70%",
                background: "#293450"
            },
            track: {
                dropShadow: {
                    enabled: true,
                    top: 2,
                    left: 0,
                    blur: 4,
                    opacity: 0.15,
                }
            },
            dataLabels: {
                name: {
                offsetY: -10,
                color: "#fff",
                fontSize: "13px"
                },
                value: {
                color: "#fff",
                fontSize: "30px",
                show: true
                }
            }
            }
        },
        fill: {
            type: "gradient",
            gradient: {
            shade: "dark",
            type: "vertical",
            gradientToColors: ["#05E996"],
            stops: [0, 100]
            }
        },
        stroke: {
            lineCap: "round"
        },
       labels: ["Progress"]
    }

任何帮助都很感激，谢谢！

reactjs

来源：https://stackoverflow.com/questions/71431717/apexcharts-radial-chart-counter-clockwise-progress-bar

3条答案

按热度按时间

vjhs03f71#

更改startAngle和endAngle选项https://apexcharts.com/docs/options/plotoptions/radialbar/

plotOptions: {
    radialBar: {  
       startAngle: -360,
       endAngle: 0,
       ...

赞(0）回复(0）举报 2022-12-18

8gsdolmq2#

我也想做同样的事情，在阅读apexcharts的文档并对它进行了试验之后，我认为这在目前是不可能的。

赞(0）回复(0）举报 2022-12-18

6ojccjat3#

我一直在寻找这个问题的答案，但没有任何结果。今天我成功地创建了一个变通方案。
刚硬编码的顶点径向条总是顺时针方向，无论你做什么，因为它总是从startAngle到endAngle使用+1。
因此，使用startAngle -360和endAngle 0将没有任何效果。
本质上，你想创建径向条并在Y轴上镜像它，然后重新镜像你想保持正常的所有东西，回到正常状态。然而，你通常需要将组件转换回原位。
您也可以尝试只选择Radialbar并只旋转它，但是我发现使用“transformX”将其他组件放回正确的位置通常更容易。
假设你想要一个从-360到90的条形图，但是是逆时针的，创建一个从0到270的径向条形图，然后使用下面的CSS转换。
下面是Angular 文档中带有逆时针方向条的Radialbar示例。
TIPP：使用精确分类器和unique，在ng-deep中使用