图表js大小和位置

Question

我目前正在开展一个项目，我需要在图表中显示一些值。我一直在看Chart.js并创建了两个显示温度和湿度的简单图表。我的问题是我无法将两个图表彼此相邻。现在它只显示在彼此之上。

我尝试过将flexGrow设置为1和其他值的flexbox，但我希望它们能够以相同的大小相互缩放。

    <div style={{display: "flex"}}>
      <Temperature chartDataTemperature={this.state.chartDataTemperature} legendPosition="bottom" />
    </div>
    <div style={{display: "flex"}}>
    <Humidity chartDataHumidity={this.state.chartDataHumidity} legendPosition="bottom"/>
    </div>

使用此代码，图表会显示在彼此之上。

我也尝试将两个图表放在同一个div中，但看起来不对。

如果有人要看一下，我已将我的项目添加到GitHub。 https://github.com/henrik3/logg

Answer 1

上有语法错误

<div style={{display: "flex"}}>

这是正确的方法：

 <div style="display: flex;">

<击> 这是正确的方法：

<div styles="{{display: flex;}}">

看一下这个例子：

<div style="display: flex;">
      <div style="width: 100px; height: 100px; background-color:red;">
        <p>
          CHART
        </p>
      </div>
      <div style="width: 100px; height: 100px; background-color:blue;">
        <p>
          CHART
        </p>
      </div>
    </div>

<击> https://www.w3schools.com/html/html_styles.asp

看看this anwser。