2

反応とes6でchart.js棒グラフを使用しようとしています。

importプロジェクトの代わりに使用しているため、GitHubrequireのドキュメントとは少し異なります。

これが私のプロジェクトの例です：

import React from 'react';
import { BarChart } from 'react-chartjs';

class HelloChart extends React.Component {
  constructor() {
    super();
    let data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [65, 59, 80, 81, 56, 55, 40],
      }]
    };
    let options = {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    };
    this.state = {
      chartData: data,
      chartOptions: options,
    };
  }
  render() {
    let chartData = this.state.chartData;
    let chartOptions = this.state.chartOptions;
    return (
      <div>
        <BarChart data={chartData} options={chartOptions} width="600" height="250" />
      </div>
    )
  }
}

export default HelloChart

これらは、コンソールに表示される 2 つのエラーです。

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofハローチャート.

と ...

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method ofハローチャート.

4

1 に答える 1

3

これで問題が解決するはずです：

const BarChart = require("react-chartjs").Bar;

また、

import { Bar as BarChart } from 'react-chartjs';

これを試して：

import React from 'react';

const BarChart = require('react-chartjs').Bar;

class HelloChart extends React.Component {
  constructor() {
    super();
    const data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [65, 59, 80, 81, 56, 55, 40],
      }]
    };
    const options = {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    };
    this.state = {
      chartData: data,
      chartOptions: options,
    };
  }
  render() {
    const { chartData, chartOptions } = this.state;
    return (
      <div>
        <BarChart data={chartData} options={chartOptions} width="600" height="250" />
      </div>
    )
  }
}

export default HelloChart;
于 2016-11-15T02:30:07.470 に答える