官网：http://www.chartjs.org/

Github：https://github.com/chartjs/Chart.js

使用方法：

1，在页面中创建一个canvas画布
<div id="echartsShow" style="height:350px;width:800px;padding:50px 50px 50px 50px">

<script src="js/echarts.js"></script>

Chart.js可到官网下载最新版Chart.js或者使用Chart.js cdn

3，在页面添加一段初始化脚本可以访问网址：javacto.taobao.com

全部代码+效果如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><!--Echarts使用JS包的导入和前台图表界面的初步实现--><!--1. 引入Echarts.js --><script src="js/echarts.js"></script><script>/*页面加载后执行的函数*/window.onload = function(){Charts();}function Charts() {//初始化Echarts控件var myChart = echarts.init(document.getElementById('echartsShow'));//清除myCharts展示（重新加载数据时最好加上）myChart.clear();// 显示标题，图例和空的坐标轴myChart.setOption({tooltip: {show: true},legend: {data: ['成绩']},xAxis: [{type: 'category',data: ["语文", "数学", "英语", "化学", "物理", "生物"]}],yAxis: [{type: 'value'}],series: [{"name": "成绩","type": "bar","data": [100, 95, 50, 88, 82, 95]}]});}</script><body><!--准备一个容器用于图表的展示--><div id="echartsShow" style="height:350px;width:800px;padding:50px 50px 50px 50px"></body></html>

这是第二个案例:分别是线性、柱状、圆形、饼形图。效果如下图

可以访问网址：javacto.taobao.com

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Chart.js - Html5 chart plugins</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"><!--<script src="js/echarts.js"></script>--></head><body><div class="container"><h1 class="text-center">Chart.js</h1></div><div class="container"><div class="row"><div class="col-sm-6"><h2 class="text-center">Line Chart</h2><canvas id="lines-graph"></canvas></div><div class="col-sm-6"><h2 class="text-center">Bars Chart</h2><canvas id="bars-graph"></canvas></div><div class="w-100"></div><div class="col-sm-6"><h2 class="text-center">Pie Charts</h2><canvas id="pie-graph"></canvas></div><div class="col-sm-6"><h2 class="text-center">Doughnut Charts</h2><canvas id="doughnut-graph"></canvas></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script><script>// Data for line chartsvar lineChartData = {labels: ["January", "February", "March", "April", "May", "June", "July"],datasets: [{label: "My First dataset",fill: false,lineTension: 0.1,backgroundColor: "rgba(75,192,192,0.4)",borderColor: "rgba(75,192,192,1)",borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: "rgba(75,192,192,1)",pointBackgroundColor: "#fff",pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: "rgba(75,192,192,1)",pointHoverBorderColor: "rgba(220,220,220,1)",pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data: [65, 59, 80, 81, 56, 55, 40],spanGaps: false,}]};var ctx = document.getElementById("lines-graph").getContext("2d");var LineChart = new Chart(ctx, {type: 'line',data: lineChartData,responsive: true,bezierCurve: false});// Bar Chartsvar barChartData = {labels: ["January", "February", "March", "April", "May", "June", "July"],datasets: [{label: "My First dataset",backgroundColor: ['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)','rgba(255, 159, 64, 0.2)'],borderColor: ['rgba(255,99,132,1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)','rgba(255, 159, 64, 1)'],borderWidth: 1,data: [65, 59, 80, 81, 56, 55, 40],}]};var ctx = document.getElementById("bars-graph").getContext("2d");var BarChart = new Chart(ctx, {type: 'bar',data: barChartData,responsive: true});// Data for pie chartvar pieData = {labels: ["Red","Blue","Yellow"],datasets: [{data: [300, 50, 100],backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]}]};var ctx = document.getElementById("pie-graph").getContext("2d");var PieChart = new Chart(ctx, {type: 'pie',data: pieData});// Data for doughnut chartvar doughnutData = {labels: ["Red","Blue","Yellow"],datasets: [{data: [300, 50, 100],backgroundColor: ["#FF6384","#36A2EB","#FFCE56"],hoverBackgroundColor: ["#FF6384","#36A2EB","#FFCE56"]}]};var ctx = document.getElementById("doughnut-graph").getContext("2d");var DoughnutChart = new Chart(ctx, {type: 'doughnut',data: doughnutData,responsive: true});</script></body></html>

图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图相关推荐

图表Chart js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
图表Chart.js入门教程
使用Chart.js来制作各种各样的图表.下面将为你全方位介绍chart.js.chart.js最与众不同之处是,它可以在HTML5 Canvas上面绘制出色的响应式图表. Chart.js允许你把不 ...
PyTorch 模型训练实用教程(附代码)
向AI转型的程序员都关注了这个号???????????? 机器学习AI算法工程公众号:datayx PyTorch 能在短时间内被众多研究人员和工程师接受并推崇是因为其有着诸多优点,如采用 Py ...
js读取http chunk流_极简 Node.js入门教程双工流
点击上方蓝字关注我们小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读双工流就是同时实现了 Readab ...
Gmsh剖三维网格教程附代码
文章目录前言一.程序代码二.程序结果 1. 带有点标号的结果图 2. 没有点标号的结果图三.总结前言前面写过三篇关于Gmsh的教程: 有限元剖网格之Gmsh安装与使用入门 Gmsh剖一维网 ...
uniapp获取手机号（详细教程附代码）
uniapp获取手机号(详细教程附代码) 一.获取code 二.通过code获取获取openId 和 session_key 三.让用户授权(同意后需要对数据解密) 个人小程序不能使用这个功能,必须是 ...
Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...

图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图

3，在页面添加一段初始化脚本可以访问网址：javacto.taobao.com

可以访问网址：javacto.taobao.com

图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图相关推荐

最新文章

热门文章

图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图

3，在页面添加一段初始化脚本 可以访问网址：javacto.taobao.com

可以访问网址：javacto.taobao.com

图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图相关推荐

最新文章

热门文章

3，在页面添加一段初始化脚本可以访问网址：javacto.taobao.com