Создание диаграммы Rechart с закругленными краями - PullRequest
Новая
       20

Создание диаграммы Rechart с закругленными краями

1 голос
/ 21 марта 2019

enter image description here

Я пытаюсь создать диаграмму, подобную этой, где столбец имеет длину X, а каждый сегмент столбца пропорционален по длине проценту отданные, которые он содержит.Я подошел довольно близко, создав вертикальную схему с накоплением, но не могу понять, как получить закругленные края.Я пробовал border={x} на Bar компонентах, но это округляет обе стороны бара, и я просто хочу, чтобы левая сторона первого и правая сторона второго бара были округлены.Любой совет?Или я, возможно, использую неправильные компоненты для начала?

Вот то, что у меня есть, и скриншот с результатом.

const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
      {name: '1', a: 50, b: 20, c: 10},
];
const StackedBarChart = React.createClass({
  render () {
  	return (
    	<BarChart layout="vertical" width={600} height={50} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
       <XAxis hide  type="number"/>
       <YAxis hide dataKey="name" type="category"/>
       <Tooltip />
       <Bar dataKey="a" stackId="a" fill="#8884d8" radius={20} />
       <Bar dataKey="b" stackId="a" fill="#8884d8" />
       <Bar dataKey="c" stackId="a" fill="black" radius={20}/>
      </BarChart>
    );
  }
})

ReactDOM.render(
  <StackedBarChart />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Не уверен, почему этот фрагмент не работает, так что вот JSFiddle https://jsfiddle.net/nur2t39y/

enter image description here

1 Ответ

2 голосов
/ 21 марта 2019

Я обнаружил проблему с Github, в которой показан пример использования массива для пропеллы radius, позволяющего указать радиус для каждого угла стержня. https://github.com/recharts/recharts/issues/793

Вот новый рабочий код и снимок экрана с результатом 

const {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
      {name: '1', a: 50, b: 20, c: 10},
];
const StackedBarChart = React.createClass({
	render () {
  	return (
    	<BarChart layout="vertical" width={600} height={50} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
       <XAxis hide  type="number"/>
       <YAxis hide dataKey="name" type="category"/>
       <Tooltip />
       <Bar dataKey="a" stackId="a" fill="#8884d8" radius={[10, 0, 0, 10]}/>
       <Bar dataKey="b" stackId="a" fill="#82ca9d" />
       <Bar dataKey="c" stackId="a" fill="black" radius={[0, 10, 10, 0]}/>
      </BarChart>
    );
  }
})

ReactDOM.render(
  <StackedBarChart />,
  document.getElementById('container')
);

enter image description here

...