Две разные метки оси x на линейном графике, графике. js react - PullRequest
1 голос
/ 12 июля 2020

Я пытаюсь создать компонент диаграммы погоды в React с помощью диаграммы. js. Мне нужны две разные оси x с температурой над диаграммой и временем под диаграммой. Данные верны в том смысле, в котором я этого не хочу, я просто хочу использовать две разные метки вверху и внизу оси x. Как мне это сделать?

import React from "react";
import { Line } from 'react-chartjs-2';

class WeatherOverview extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            chartData: {
                labels: ['15:00', '18:00', '21:00', '00:00', '03:00', '06:00', '09:00', '12:00'], //time
                datasets: [{
                    data: [18, 19, 18, 16, 15, 15, 16, 17, 18] //temp
                }],
            }
        }
    }
    render(){
        return (
            <div className="chart">
                <Line
                    data={this.state.chartData}
                    options={{
                        scales: {
                            yAxes: [{
                                gridLines: {
                                    drawOnChartArea: false
                                },
                                ticks: {
                                    suggestedMin: 13, // lowest from data minus 2/3
                                    display: false 
                                }
                            }],
                            xAxes: [
                                {
                                    gridLines: {
                                        drawOnChartArea: false
                                    },
                                },
                                { position: 'top' },
                            ]
                        }
                    }}
                />
            </div>
        )
    }
}

export default WeatherOverview;

1 Ответ

0 голосов
/ 12 июля 2020

посмотрите на эту ссылку:

Как создать метку с двумя осями X с помощью диаграммы. js

похоже, что вы спрашиваете.

наслаждайтесь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...