如何使用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);
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://myzitong.com/article/jiphhj.html