Sparklines圖表出現不同的大小？

我正在製作一個簡單的天氣應用程序，即使具有相同的高度和寬度屬性，我的Sparklines圖表也會以不同的大小顯示，爲什麼？Sparklines圖表出現不同的大小？

WeatherList容器：

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的WeatherList內的地方，但我一直沒有成功，到目前爲止坐在這裏。

來源

2017-08-10 Collin DeSoto