使用chart.js渲染條形圖並作出反應es6

Question

我正在嘗試使用帶有react和es6的chart.js條形圖。

由於我使用的是import而不是require，因此我的項目看起來與documentation on GitHub有點不同。

這裏是我的項目的一個例子：

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 

這些都是在上午的兩個錯誤讓我的控制檯：

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 .

而且......

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'; 

常量乙

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;