如何使用Chart.js

这篇文章主要讲解了如何使用Chart.js，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

站在用户的角度思考问题，与客户深入沟通，找到扶风网站设计与扶风网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、成都网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟空间、企业邮箱。业务覆盖扶风地区。

本文实例讲述了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, 255, 1)",
      pointBackgroundColor: "rgba(56, 96, 244, 1)",
      pointBorderColor: "rgba(255, 255, 255, 1)",
      pointRadius: 4
     }
    ]
   },
   
   options: {
    responsive: true,
    legend: {
     display: false
    },
    maintainAspectRatio: false
   }
  });
 };

 render() {
  return (
   
    
  );
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

如何使用Chart.js

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, {
   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, 255, 1)",
      pointBackgroundColor: "rgba(56, 96, 244, 1)",
      pointBorderColor: "rgba(255, 255, 255, 1)",
      pointRadius: 4
     }
    ]
   },

   options: {
    responsive: true,
    legend: {
     display: false
    },
    maintainAspectRatio: false
   }
  });
 };

 renderCurrent = () => {
  const { data } = this.state;
  const currentCharttemp = this.currentChart.getContext("2d");
  if (typeof currentChart !== "undefined") {
   currentChart.destroy();
  }
  currentChart = new Chart(currentCharttemp, {
   type: "line",
   data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [
     {
      data: data,
      backgroundColor: "rgba(71, 157, 255, 0.08)",
      borderColor: "rgba(0, 119, 255, 1)",
      pointBackgroundColor: "rgba(56, 96, 244, 1)",
      pointBorderColor: "rgba(255, 255, 255, 1)",
      pointRadius: 4
     }
    ]
   },

   options: {
    responsive: true,
    legend: {
     display: false
    },
    maintainAspectRatio: false
   }
  });
 };

 render() {
  return (
   
    
  );
 }
}

看完上述内容，是不是对如何使用Chart.js有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

文章名称：如何使用Chart.js
转载注明：http://dzwzjz.com/article/jiphhj.html

大橙子网站建设，新征程启航

如何使用Chart.js

其他资讯