溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何使用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 (
<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, {
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>
);
}
}看完上述內容，是不是對如何使用Chart.js有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
