Javascript 不同尺寸的迷你图？

我正在制作一个简单的天气应用程序，我的星图大小不一，即使高度和宽度相同，你知道为什么吗

天气表集装箱：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../components/chart';

class WeatherList extends Component {
    renderWeather(cityData) {
        const name = cityData.city.name;
        const temps = cityData.list.map(weather => weather.main.temp);
        const pressures = cityData.list.map(weather => weather.main.pressure);
        const humidities = cityData.list.map(weather => weather.main.humidity);

        return(
            <tr key={name}>
                <td>{name}</td>
                <td><Chart data={temps} color="orange" units="K" /></td>
                <td><Chart data={humidities} color="green" units="%" /></td>
                <td><Chart data={pressures} color="black" units="hPa" /></td>
            </tr>
        );
    }


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

function mapStateToProps({ weather }) {
    return { weather };
}

// Above function can also be written...
/* function mapStateToProps({state}){
    return {weather: state.weather};
}*/

export default connect(mapStateToProps)(WeatherList);

实际图表组件：

import _ from 'lodash';
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';

// lodash will grab the average
function average(data) {
  return _.round(_.sum(data)/(data.length));
}

export default (props) => {
    return (
      <div>
        <Sparklines height={120} width={180} data={props.data}>
            <SparklinesLine color={props.color} />
            <SparklinesReferenceLine type="avg" />
        </Sparklines>
        <div>{average(props.data)} {props.units}</div>
      </div>  
    ); 
};

我想它可能在JSX的天气列表中的某个地方，但我一直坐在这里，至今没有成功。

试试看

高度->垂直高度

宽度->svgWidth

应该更正您的输出

尝试

高度->垂直高度

宽度->svgWidth

应该更正您的输出

只需添加css：

svg{ 高度：150像素； } 只需添加css：

svg{ 高度：150像素； }