本文例項講述了Chart.js功能與使用方法。分享給大家供大家參考，具體如下：

官方文件

英文文件 https://www.chartjs.org/docs/2.8.0/
中文文件 https://chartjs-doc.abingoal.com

在react中的使用

開始使用

npm install chart.js --save

在相應的頁面中引入 chartjs

import Chart from "chart.js"

先寫一個小的demo

import React from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";

class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {};
 }
 componentDidMount() {
 this.renderCanvas()
 }

 // 作圖
 renderCanvas = () => {
  const myChartRef = this.chartRef.getContext("2d");
  new Chart(myChartRef,{
   type: "line",data: {
    labels: [1,2,3,4,5],datasets: [
     {
      data: [10,20,50,80,100],backgroundColor: "rgba(71,157,255,0.08)",borderColor: "rgba(0,119,1)",pointBackgroundColor: "rgba(56,96,244,pointBorderColor: "rgba(255,pointRadius: 4
     }
    ]
   },options: {
    responsive: true,legend: {
     display: false
    },maintainAspectRatio: false
   }
  });
 };

 render() {
  return (
   <div style={{ height: 288 }}>
    <canvas id="myChart" ref={ref => (this.chartRef = ref)} />
   </div>
  );
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

https://codesandbox.io/embed/aged-meadow-2sc8m?fontsize=14

動態更新的資料

import React from "react";
import ReactDOM from "react-dom";

import Chart from "chart.js";
let currentChart;

class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   data: [30,60,90,120,100]
  };
 }
 componentDidMount() {
  this.renderCanvas();
  this.renderCurrent();
 }

 // 作圖
 renderCanvas = () => {
  const myChartRef = this.chartRef.getContext("2d");
  new Chart(myChartRef,maintainAspectRatio: false
   }
  });
 };

 renderCurrent = () => {
  const { data } = this.state;
  const currentCharttemp = this.currentChart.getContext("2d");
  if (typeof currentChart !== "undefined") {
   currentChart.destroy();
  }
  currentChart = new Chart(currentCharttemp,datasets: [
     {
      data: data,maintainAspectRatio: false
   }
  });
 };

 render() {
  return (
   <div>
    <canvas id="myChart" ref={ref => (this.chartRef = ref)} />
    <br />

    <button
     onClick={()=>
      this.setState({ data: [200,500,100] },this.renderCurrent)
     }
    >
     更新資料
    </button>
    <canvas id="currentChart7" ref={ref => (this.currentChart = ref)} />
   </div>
  );
 }
}

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容可檢視本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查詢演算法技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。