Chart.js使用小结

官方文档

英文文档
https://www.chartjs.org/docs/…

中文文档 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 (
      <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/…

动态更新的数据

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 (
      <div>
        <canvas id="myChart" ref={ref => (this.chartRef = ref)} />
        <br />

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

https://blog.bitsrc.io/custom…