本文实例讲述了Chart.js功能与使用方法。分享给大家供大家参考，具体如下：官方文档官方文档官方文档英文文档 https://www.chartjs.org/docs/2.8.0/
中文文档 https://chartjs-doc.abingoal.comhttps://www.chartjs.org/docs/2.8.0/https://chartjs-doc.abingoal.com在react中的使用在react中的使用在react中的使用react开始使用
npm install chart.js --save


npm install chart.js --save

在相应的页面中引入 chartjschartjs
import Chart from "chart.js"


import Chart from "chart.js"

先写一个小的demodemo
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);


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 (

(this.chartRef = ref)} />

);
}
}

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

https://codesandbox.io/embed/aged-meadow-2sc8m?fontsize=14https://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 (

(this.chartRef = ref)} />






onClick={()=>

this.setState({ data: [200, 500, 20, 50, 100] }, this.renderCurrent)

}

>

更新数据



(this.currentChart = ref)} />

);
}
}


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 (

(this.chartRef = ref)} />






onClick={()=>

this.setState({ data: [200, 500, 20, 50, 100] }, this.renderCurrent)

}

>

更新数据



(this.currentChart = ref)} />

);
}
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》JavaScript操作DOM技巧总结JavaScript页面元素操作技巧总结JavaScript事件相关操作与技巧大全JavaScript查找算法技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript错误与调试技巧总结希望本文所述对大家JavaScript程序设计有所帮助。