Диаграмма JS ширина не определена в типе сценария реакции - PullRequest
0 голосов
/ 30 марта 2020

Я использовал react-chartjs-2 с машинописным шрифтом + реагировать и пытался создать простую гистограмму, но консоль моего браузера жаловалась на width не определено. Я не совсем уверен, есть ли что-то, что я не настраивал прямо ниже?

Ошибка консоли браузера:

Uncaught TypeError: Cannot read property 'width' of undefined
    at n.draw (Chart.js:15474)
    at Object.draw (Chart.js:7231)
    at $t.draw (Chart.js:9825)
    at $t.render (Chart.js:9782)
    at Object.callback (Chart.js:2204)
    at Object.advance (Chart.js:3528)
    at Object.startDigest (Chart.js:3501)
    at Chart.js:3490

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import BarChartComponent from './components/BarChartComponent';

ReactDOM.render(
    <div>
        <BarChartComponent />
    </div>,
    document.querySelector('#app')
)

BarChartComponent.tsx


import * as React from 'react';
import { Bar } from 'react-chartjs-2';

export default class BarChartComponent extends React.Component {
    chartData = {
        labels: ['CA', 'TX'],
        datasets:[
        {
            label:'Population',
            data:[
                23000,
                10000
            ],
            backgroundColor:[
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)'
            ]
        }
        ]
    };

    render() {
        return (
            <Bar 
                data={this.chartData}
                options={{
                    title:{
                    display: true,
                    text: "Populations",
                    fontSize: 25
                    },
                    legend:{
                        display: true,
                        position: "center"
                    },
                    maintainAspectRatio: false,
                }}
            />
        );
    }
}

Будем благодарны за любые предложения.

1 Ответ

0 голосов
/ 30 марта 2020

Я считаю, что если вы установите maintainAspectRatio на false, вы должны явно определить размеры.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...