#javascript #reactjs #recharts
#javascript #reactjs #повторная
Вопрос:
Я пытаюсь создать гистограмму, подобную этой, где длина полосы равна 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>
Не уверен, почему этот фрагмент не работает, поэтому вот JSFiddlehttps://jsfiddle.net/nur2t39y /
Ответ №1:
Я обнаружил проблему на 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')
);