chart.jsで棒グラフをレンダリングし、反応してes6を返します。

Question

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

requireの代わりにimportを使用していますので、私のプロジェクトはdocumentation on GitHubと少し違って見えます。ここで

は私のプロジェクトの例です：

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 HelloChart .

そして...

：

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つのエラーです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 HelloChart .

Answer 1

この問題解決する必要があります。

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

または

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

試してみてください。たとえばパー

import React from 'react'; 

のconst B

arChart = 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;