#reactjs #recharts
#reactjs #перезарядка
Вопрос:
У меня есть массив данных, подобный приведенному ниже, который я хочу показать определенным образом, используя перезарядки.
const severityExampleData: any = [
{symptom_type: 'chest pain', mild: 1, moderate: 2, severe: 1, total: 4},
{symptom_type: 'pursiness', mild: 2, moderate: 1, severe: 10, total: 13},
{symptom_type: 'cough', mild: 0, moderate: 0, severe: 1, total: 1},
];
Я хочу, чтобы моя ось Y имела четные размеры тиков, и я хочу, чтобы они составляли 5 тиков, поэтому я использовал следующее решение.
<ResponsiveContainer width='100%' aspect={4.8/3.0}>
<BarChart data={data} margin={{top: 0, left: 0, right: 0, bottom: 0}}>
<CartesianGrid strokeDasharray="3" vertical={false} />
<XAxis reversed dataKey="symptom_type" tickLine={false} axisLine={false}/>
<YAxis orientation='right' tickLine={false} axisLine={false} tickCount={5} domain={['auto', MAX]}/>
<Tooltip />
{fieldNames.map((value: any, i:number) => {
console.log(value);
return (
<Bar name={value} barSize={50}
radius={i === fieldNames.length - 1 ? [10, 10, 0, 0]: [0, 0, 0, 0]}
dataKey={value} stackId='a' fill={colors[i]}/>);
})}
</BarChart>
</ResponsiveContainer>
И результат будет следующим. даже тикает изображение
Но я хочу, чтобы мой тик с высокой границей был суммой моих «полных» полей (что в данном случае равно 18). Чтобы достичь этого, я попытался установить свойство ‘domain’ в компоненте ‘yAxis’ на [‘0’, MAX].(MAX — это сумма моих общих значений), но теперь моя диаграмма выглядит так. максимальное значение для тиков
На самом деле я хочу, чтобы 5 тиков равномерно делили мою ось Y, а мой самый высокий тик был МАКСИМАЛЬНЫМ. Извините, если мой английский был грубым, я не очень хорош в этом.
Ответ №1:
Я решил это с помощью
const tickArray = [0, Math.trunc(MAX/4), Math.trunc(MAX/2), Math.trunc(3*MAX/4), MAX];
и
ticks={tickArray} domain={[0, MAX]}
в моем <YAxis>
компоненте и удален
tickCount={5}
Комментарии:
1. знаете ли вы, почему необходимо устанавливать КАК тики, ТАК И домен? Домен должен быть указан из тиков, верно?
2. Они разные. Тики — это отображаемые метки, домен — это область действия полной оси. Таким образом, домен может варьироваться от 0 до 100, в то время как тики включают только [30, 50, 70], если по какой-то причине вам нужно только 3 тика в середине вашей оси.