Блог

В данный момент я создаю такую столбчатую диаграмму:

Компнент:

 lt;ResponsiveContainer width="100%" height="100%"gt;  lt;ComposedChart  data={mappedValues}  margin={{  top: 20,  right: 80,  bottom: 20,  left: 20,  }}  gt;  lt;CartesianGrid stroke="#EBF0FA" vertical={false} /gt;  lt;XAxis  dataKey="periodFixed"  axisLine={false}  tickLine={false}  tick={lt;CustomizedAxisTick /gt;}  /gt;  lt;YAxis  yAxisId="left"  axisLine={false}  tickLine={false}  tickFormatter={formatYAxis}  stroke="rgba(99, 110, 131, 0.5)"  /gt;  lt;YAxis  yAxisId="right"  orientation="right"  axisLine={false}  tickLine={false}  stroke="rgba(99, 110, 131, 0.5)"  /gt;  lt;Tooltip /gt;  {legendFlag ? (  lt;Legend  wrapperStyle={{  paddingTop: "25px",  paddingLeft: "10px",  }}  /gt;  ) : null}   {groups.map((data, i) =gt; (  lt;Bar  key={i}  dataKey={data}  yAxisId="left"  stackId="a"  fill={data === groups[0] ? colours[0] : colours[1]}  barSize={barSize}  radius={[4, 4, 0, 0]}  /gt;  ))}  lt;Line  type="linear"  yAxisId="right"  dataKey="transactions"  stroke="#ADD868"  dot={false}  strokeWidth={3}  /gt;  lt;/ComposedChartgt; lt;/ResponsiveContainergt;  

Но результат, который я получаю, примерно такой:

и я пытаюсь найти способ добавить только радиус на верхнюю полосу столбчатой диаграммы. Есть ли какой-нибудь быстрый способ или решение для этого? Спасибо!

Я нашел обходной путь для этой задачи,

Я использовал Cell для Stacked Bars и исправил это так:

 {groups.map((data, i) =gt; (  lt;Bar  key={i}  dataKey={data}  yAxisId="left"  stackId="a"  barSize={barSize}  gt;  {mappedValues.map((entry, index) =gt; (  lt;Cell  key={`cell-${index}`}  fill={data === groups[0] ? colours[0] : colours[1]}  radius={renderRadius(entry, data, index)}  /gt;  ))}  lt;/Bargt; ))}  

Где mappedValues находится мой основной объект данных. Затем в своей функции я каждый раз проверял, нахожусь ли я на верхней панели и есть ли у меня для этого значение:

 const renderRadius = (entry, data, i) =gt; {  const length = groups.length - 1;  if (data !== groups[length]) {  if (entry[groups[length]] === 0) {  return [4, 4, 0, 0];  } else {  return 0;  }  } else {  if (entry[groups[length]] !== 0) {  return [4, 4, 0, 0];  }  } };  

В то время groups как исходили из ответа:

 const groups = props.data.arrStatsData[0].groups;  

И это работает! Если есть какое-либо другое лучшее решение, пожалуйста, дайте мне знать 🙂