时间戳

首页 > 解决方案 > 将数据库中的数据放入 React 中的图表中

javascript - 将数据库中的数据放入 React 中的图表中

问题描述

我正在尝试将数据库中的数据放入 Chartjs 图表中，但不确定如何。

我的数据库看起来像：

GET /dwelling/room/


[
    {
        "room_id": 1,
        "room_name": "Living Room",
        "room_data": [
            {
                "id": 1,
                "temperature": "5,15,9..."
                "humidity": "9,3,10..."
                ...

我目前正在使用 MDB 反应库中的代码来绘制折线图：

    const dataLine = {
  labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
  datasets: [
    {
      fill: false,
      lineTension: 0.1,
      backgroundColor: 'rgba(75,192,192,0.4)',
      ...
      pointHitRadius: 10,
      data: [?]
    }
  ]
};

我添加了一个问号，data: [?]因为这是我想要从我的数据库中放置数据的地方。这就是我获取其他部分数据的方式：

{props.room.map(room => {

                return (

                    <React.Fragment>
                        <div>{room.room_name}<div>
                    </React.Fragment>
                    ...

我努力了：

var dataSet = {room.room_data[0].temperature}
var dataArray = dataSet.split(',');
...
data: [dataArray]

但是，这不起作用，因为我必须在地图之外声明变量。

我将不胜感激任何帮助！谢谢！

标签： javascripthtmlreactjs

解决方案

您可以使用 Chartjs 的 React 绑定：https ://www.npmjs.com/package/react-chartjs-2

有关参数请参阅 Chartjs 文档： https ://www.chartjs.org/docs/latest/charts/line.html#number

但是，这不起作用，因为我必须在地图之外声明变量。-> 是什么阻止您在地图中声明变量？

推荐阅读