React Recharts：RadialBarChart 顺时针方向

Question

我正在测试名为 Recharts 的 React 图表。我喜欢用这个RadialBarChart。

https://recharts.org/en-US/examples/SimpleRadialBarChart

使用功能组件显示径向条形图的代码如下所示。不知何故，我无法按顺时针方向制作图表运行。

下面的顺时针线不起作用。如果您有使用此图表的经验，希望您能给我一些如何配置图表的指导。

import React from 'react'
import {
  RadialBarChart,
  RadialBar,
  Legend,
  ResponsiveContainer,
} from 'recharts'

const data = [
  {
    name: '18-24',
    uv: 31.47,
    pv: 2400,
    fill: '#8884d8',
  },
  {
    name: '25-29',
    uv: 26.69,
    pv: 4567,
    fill: '#83a6ed',
  },
  {
    name: '30-34',
    uv: 15.69,
    pv: 1398,
    fill: '#8dd1e1',
  },
  {
    name: '35-39',
    uv: 8.22,
    pv: 9800,
    fill: '#82ca9d',
  },
]

const style = {
  top: '50%',
  right: 0,
  transform: 'translate(0, -50%)',
  lineHeight: '24px',
}

export default function App() {
  return (
    <ResponsiveContainer width='100%' aspect={3}>
      <RadialBarChart
        cx='50%'
        cy='50%'
        innerRadius='10%'
        outerRadius='80%'
        barSize={10}
        data={data}
      >
        <RadialBar
          minAngle={15}
          label={{ position: 'insideStart', fill: '#fff' }}
          background
          clockWise
          dataKey='uv'
        />
        <Legend
          iconSize={10}
          layout='vertical'
          verticalAlign='middle'
          wrapperStyle={style}
        />
      </RadialBarChart>
    </ResponsiveContainer>
  )
}

Answer 1

请查看react chart 2 JS 这个强烈推荐超过500,0000 react chart 2 JS check this website image

Answer 2

顺时针或anti-clockwise实际上与startangle有关：

<RadialBarChart
        cx='50%'
        cy='50%'
        innerRadius='10%'
        outerRadius='80%'
        barSize={10}
        startAngle={180} 
        endAngle={0}
        data={data}
      >

React Recharts：RadialBarChart 顺时针方向

React Recharts: RadialBarChart clockwise

javascript

reactjs

recharts