Блог

Главная - Вопросы по программированию - как отобразить пользовательские значения по оси x при повторном использовании?

как отобразить пользовательские значения по оси x при повторном использовании?

#reactjs #recharts

#reactjs #recharts

Вопрос:

  <LineChart
    width={400}
    height={200}
    data={data}
    margin={{
      top: 5, right: 30, left: 20, 
    }}
  >
    <CartesianGrid  />
    <XAxis dataKey="x" /* tick={false} *//>
    
    <YAxis  />
    <Tooltip content={tooltipContent}/>
    
    <Line type="monotone"  dataKey="y" strokeWidth={1} dot={false} activeDot={{ r: 5 }} />
    
  </LineChart>

мой набор данных включает только десятичные точки (23,444, 54,6665, ..). Я хочу разделить ось на равные 10 половин (10,20,30, … 100). Как я могу отобразить эти значения на оси?
ниже приведено изображение диаграммы
[1]:https://i.stack.imgur.com/TatGP.png

Ответ №1:

Чтобы использовать пользовательские значения в оси X или пользовательский ticks , вам необходимо использовать следующие реквизиты в вашем компоненте оси X:

  • Укажите тип значений для нумерации с помощью type="number"
  • Укажите значения тиков ticks={[10, 20, 30, [...], 100]}
  • И домен для указания ограничений domain={[10, 100]}

В конце концов, ваша ось X должна выглядеть следующим образом:

 <XAxis
  dataKey="x"
  type="number"
  ticks={[10, 20, 30, [...], 100]}
  domain={[10, 100]}
/>