Question

我正在使用react-sparklines为特定城市绘制5天天气数据的图表。

这是我的React容器（尚未完成），显示用户搜索的每个城市的天气数据 -

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';

class WeatherList extends Component {
    constructor(props) {
        super(props);
        this.renderWeather = this.renderWeather.bind(this);
    }

    renderWeather(cityData) {
        const name = cityData.city.name;
        const temps = cityData.list.map(w => w.main.temp);
        console.log(temps);
        return (
            <tr key={name}>
                <td>{name}</td>
                <td> 
                    <Sparklines height={40} width={80} data={temps}>
                        <SparklinesLine color="red" />
                    </Sparklines>
                </td>
            </tr>
        )
    }


    render() {
        return (
            <table className="table table-hover">
            <thead>
                <tr>
                    <th>City</th>
                    <th>Temperature</th>
                    <th>Pressure</th>
                    <th>Humidity</th>
                </tr> 
            </thead>
            <tbody>
                {this.props.weather.map(this.renderWeather)}

            </tbody>


            </table>
        )
    }
}

function mapStateToProps(state) {
    return {weather: state.weather};
}

export default connect(mapStateToProps, null)(WeatherList);

并且，我已经给出了具体的测量结果，说明了每个迷你图表的宽度和高度 -

<Sparklines height={40} width={80} data={temps}>

然而，虽然在Chrome上渲染时测量结果似乎正确，但图表在Firefox上完全不成比例。以下是截图 -

排名第一的是Chrome，Firefox低于 -

接下来，我在Firefox和Chrome上使用React Dev Tools检查了迷你图表。结果如下：

Firefox -

CHROME-

该项目仅使用Bootstrap，而不使用其他CSS。对于此特定表，仅使用table和table-hover类。那么，为什么在Firefox上的图表呈现方式与在Chrome上呈现的不同，即使width和height在两者中都是不变的？我该如何解决？

Answer 1

这看起来像Stephen Grider关于React的课程，非常优秀，我建议你做所有特别是GraphQL和JWT认证的。

在他的项目显示正确的那个项目中存在一个小问题，而你的项目可能会有一个不正确的大小问题。在视频系列的后期，他介绍了一些修复它的CSS。

如果我没记错的话，SVG图形上的一些CSS可以提供合适的样式。之后我和Sparklines一起玩了，我注意到它有一种倾向于流淌我可能称之为一些古老的大小，所以我怀疑这是一个让CSS正确的问题。

我正在查看我的项目，尝试将其放入CSS：

svg {
    height: 150px;
}

为什么在firefox上反应 - 迷你图表的呈现方式与在chrome上呈现的不同？

1 个答案: