Ярлык ReCharts xaxis теперь отображается с пользовательским доменом - PullRequest
Новая
       4

Ярлык ReCharts xaxis теперь отображается с пользовательским доменом

0 голосов
/ 05 февраля 2020

Может быть, кто-то может помочь. Я изменяю библиотеку диаграмм с response-vis на recharts, так как response-vis теперь устарела.

У меня проблемы с настройкой пользовательского домена и правильным отображением xaxis.

Я хочу чтобы показать [5,6,7,8,9,10,11,12,13], представляющие часы с 5:00 до 13:00. Поскольку сейчас только 12 часов, у меня еще нет данных за 12 или 13, но я все еще хочу показать эти часы в домене, в противном случае графики выглядят деформированными в начале дня, а также, когда нет активность в определенный час, она полностью пропала.

Я поместил данные диаграммы в качестве переменной, чтобы показать, как я их получаю.

Все работает нормально, за исключением того, что не показывает мои метки на оси. Я пытался tickformatter, изменение типа, интервал и т. Д. c. кажется, ничто не поднимает ярлыки ...

Кто-нибудь может посоветовать? :)

enter image description here

import React from 'react';
import {
  BarChart, Bar, XAxis, ResponsiveContainer
} from 'recharts';

const BarReCharts = (props) => {
    const {color,data} = props

    //live data
    /* let chartData = []
    data.map(item => {
        chartData.push({x: Number(item.hour), y: item.units})
    }) */


    let chartData = [
        {x: 5, y: 1508},
        {x: 6, y: 107},
        {x: 7, y: 325},
        {x: 8, y: 439},
        {x: 9, y: 982},
        {x: 10, y: 1562},
        {x: 11, y: 50},
        ]

    const Label = (props) => {
          const {x, y, value} = props;

             return (
             <text 
                x={x} 
                y={y} 
                dx={"5.5%"}
                dy={-4} 
                fontSize='10' 
                fontWeight="bold"
                fill={"#181818"}
                textAnchor="middle">{value}</text>
             )
      }


    return (
        <ResponsiveContainer width={"100%"} height={200}>
            <BarChart
                data={chartData}
                height={100}
                barCategoryGap={1}
                margin={{
                top: 15, right: 5, left: 5, bottom: -5,
                }}
            >
                <XAxis
                    tick={{fontSize: 8}}
                    dataKey="x"
                    type="number"
                    domain={[4.5,13.5]}
                    ticks={[5,6,7,8,9,10,11,12,13]}
                />
                <Bar dataKey="y" fill={color} label={<Label />}/>
            </BarChart>
        </ResponsiveContainer>
    );
}

export default BarReCharts

1 Ответ

0 голосов
/ 05 февраля 2020

Я создал коды и ящик для того же самого, я вижу метки

https://codesandbox.io/s/recharts-barchart-nf0yk

...