Две разные оси x с использованием диаграмм. js и реагировать

Question

Я пытаюсь создать компонент диаграммы погоды в 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;

Я хочу что-то вроде виджета погоды Google -

введите описание изображения здесь

Answer 1

Чтобы сопоставить пример Google Weather со значениями, плавающими над точками данных, вам действительно нужен плагин, например chart js -plugin-datalabels .

Установите его через npm:

npm install chartjs-plugin-datalabels --save

Импорт:

import 'chartjs-plugin-datalabels';

И включите его в свой options объект:

plugins: {
   datalabels: {
      display: true
   }
}

Это добавит метки данных поверх вашего точки данных. См. Документацию для получения дополнительной информации о том, как настроить метки данных.

Я сделал вашу диаграмму похожей на карту погоды Google с некоторыми другими изменениями. Вот полный пример с вашими данными:

Some of the changes I made include:

• Added datalabels plugin
• Set colors accordingly
• Set pointRadius to 0 on your dataset
• Removed your extra X axis
• On each axis, set drawBorder: false and tickMarkLength: 0

{
  type: 'line',
  data: {
    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
      backgroundColor: '#fff5cc',
      borderColor: '#fc0',
      pointRadius: 0,
    }],
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          drawOnChartArea: false,
          drawBorder: false,
          tickMarkLength: 0,
        },
        ticks: {
          suggestedMin: 13, // lowest from data minus 2/3
          display: false
        }
      }],
      xAxes: [{
        gridLines: {
          drawOnChartArea: false,
          drawBorder: false,
          tickMarkLength: 0,
        },
        ticks: {
          fontColor: '#bababa',
        }
      }]
    },
    legend: {
      display: false
    },
    layout: {
      padding: {
        top: 20
      }
    },
    plugins: {
      datalabels: {
        align: 'top',
        color: '#bababa',
        font: {
          weight: 'bold'
        },
        display: true,
      },
    },
  }
}

Answer 2

Это мой подход:

var chartData = {
    labels: ['15:00', '18:00', '21:00', '00:00', '03:00', '06:00', '09:00', '12:00'],
    datasets: [
        {
            fillColor: "#FFF5D7",
            strokeColor: "#FFCC01",
            data: [18, 19, 18, 16, 15, 15, 16, 17, 18]
        }
    ]
};

var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
    scaleOverride : true,
    scaleSteps : 10,
    scaleStepWidth : 3,
    scaleStartValue : 0,
    showTooltips: false,
    onAnimationComplete: function () {
        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, 20);
            });
        })
    }
});

https://jsfiddle.net/MartinGK/u4Lr8gzw/31/

Может быть, это поможет вам начать работу.

Рекомендую продолжить чтение документации .