Вертикальное наложение линейных графиков с использованием библиотеки Chart Js, использующей ту же ось x - PullRequest
Новая
       3

Вертикальное наложение линейных графиков с использованием библиотеки Chart Js, использующей ту же ось x

0 голосов
/ 11 апреля 2020

Я хочу иметь три линейные диаграммы друг под другом. Они делят одну и ту же ось X (время). Я смог создать это: enter image description here

Однако очень бесполезно иметь ось X на верхней и средней диаграммах. Я бы предпочел не отображать оси X для верхней и средней. Когда я попробовал это, я получил это: enter image description here

Но, как вы можете видеть, последняя сетка для 12:00 не видна на верхней и средней диаграмме, а сетки не видны выровненный (выглядит странно). Каждый график отображается как отдельный компонент с использованием React.

Вот мой TimelinePlot компонент, который рендерит каждый LineChart (извините за беспорядок, но я еще не реорганизовал его): 

    import React from 'react';
import { Line } from 'react-chartjs-2';
import { GetColors } from '../../utils/PlotDescriptionHelper';

class TimelinePlot extends React.Component {
  MapPropsToData(props) {
    const colors = GetColors(props.series.length);
    return props.series.map((dataset, index) => {
      return {
        label: dataset.name,
        data: dataset.data,
        borderWidth: 1,
        fill: false,
        borderColor: colors[index],
        //pointBackgroundColor: 'rgb(255,255,255)',
      };
    });
  }

  MapPropsToOptions(props) {
    return {
      elements: {
        point: {
          radius: 0,
        },
      },
      legend: {
        // display: props.showLegend,
        position: 'top',
        align: 'end',
      },
      scales: {
        yAxes: [
          {
            ticks: props.yAxisTicks,
            scaleLabel: {
              display: true,
              labelString: props.yAxisName + props.yAxisUnit,
            },
          },
        ],
        xAxes: [
          {
            type: 'time',
            // position: props.xAxisPosition,
            time: {
              parser: 'YYYY-MM-DD HH:mm',
              tooltipFormat: 'll HH:mm',
            },
            // scaleLabel: {
            //   display: true,
            //   //labelString: 'Date',
            // },
            ticks: {
              min: props.xAxisStart,
              max: props.xAxisEnd,
              //display: true,
              display: props.xAxisDisplay,
            },
          },
        ],
      },
    };
  }

  render() {
    const dataset = { datasets: this.MapPropsToData(this.props) };
    return (
      <div className='measurement-row'>
        <Line
          data={dataset}
          options={this.MapPropsToOptions(this.props)}
          position='absolute'
          height='15%'
          width='80%'
        />
      </div>
    );
  }
}

А вот метод рендеринга родитель, использующий TimelinePlot компонент: 

render() {
    var plots = Object.keys(this.state.timeSeries).map((key, index) => {
      return (
        <TimelinePlot
          key={key + index}
          series={this.state.timeSeries[key]}
          yAxisName={FirstLetterToUpper(key)}
          yAxisUnit={MapKeyToUnit(key)}
          xAxisDisplay={index === Object.keys(this.state.timeSeries).length - 1}
          xAxisPosition={index === 0 ? 'top' : 'bottom'}
          xAxisStart={this.state.startTime}
          xAxisEnd={this.state.endTime}
          showLegend={index === 0}
          yAxisTicks={MapYAxisTicks(key)}
        />
      );
    });

    return (
      <div className='width-90'>
        <TimelineDashboardHeader />
        <div className='dashboard__column'>{plots}</div>
      </div>
    );
  }
...