javascript - 不同尺寸的迷你图？

Question

我正在制作一个简单的天气应用程序，我的迷你图显示出不同的尺寸，即使具有相同的高度和宽度属性，知道为什么吗？

天气列表容器:

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>  
    ); 
};

我认为它可能在 WeatherList 中某处的 JSX 中，但到目前为止我一直坐在这里没有成功。

Answer 1

尝试

高度 -> svgHeight

宽度 -> svgWidth

应该更正你的输出