how2j.cn

下载区
文件名 文件大小
chart.min.rar 43k

解压rar如果失败,请用5.21版本或者更高版本的winrar

点击下载 winrar5.21
步骤 1 : 是什么   
步骤 2 : 为什么要学这个   
步骤 3 : chart.min.js   
步骤 4 : html   
步骤 5 : js代码   
步骤 6 : 完整代码   

如图所示,这是一个用 chartjs 做的线状图。 chartjs 就是可以画各种图表的一款前端工具~
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script> <div style="width:400px;margin:0px auto"> <canvas id="myChart" ></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['红', '蓝', '黄', '绿', '紫', '橙'], datasets: [{ label: '示例', data: [12, 19, 3, 5, 2, 3], borderColor:'blue', borderWidth: 1, fill: false, }] }, options: { tooltips: { intersect: false, mode: 'index' } } }); </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

为什么要学这个

edit
因为站长准备做的 springcloud 项目会用到这个。。。 所以大家先学习学习吧
为什么要学这个
首先需要 char.min.js,我把它放在了 右上角 chart.min.rar 供大家下载

在本例里我也提供了在线的 chart.min.js 文件:


<script src="http://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
然后是 html 代码。
首先准备一个宽度是 400px并且居中的div.
接着在里面放一个 <canvas> 元素。 canvas 就是画布的意思, 各种图表就是在它的基础上画出来的。
最后给这个 canvas 一个 id: myChart, 方便后续操作它。
<div style="width:400px;margin:0px auto"> <canvas id="myChart" ></canvas> </div>
<div style="width:400px;margin:0px auto">
    <canvas id="myChart" ></canvas>
</div>
1. 通过 dom 操作获取 myChart 对象的 2d 上下文:

var ctx = document.getElementById('myChart').getContext('2d');

2. 基于 ctx Chart对象,并传递如下参数进去
2.1 type: 'line' 表示这个是一个线型图表。 如果要柱状图,修改成 'bar' 就可以了
2.2 data: 提供要显示的数据
2.2.1 labels 表示数据下方的文字: '红', '蓝', '黄', '绿', '紫', '橙'
2.2.2 datasets 表示数据集合。 这里数据集合里只有一个数据,如果是多个数据,就会在图表上看到多条线,所以这里只会看到一条线。
2.2.2.1 label: 这组数据的名称
2.2.2.2 data: 具体数据
2.2.2.3 borderColor: 线条颜色
2.2.2.4 borderWidth: 线条宽度
2.2.2.5 fill: false. 不进行填充
2.3 options: 其他选项
2.3.1 tooltips 表示鼠标移动到图标的时候的提示信息。
2.3.1.1 intersect: false. 表示鼠标不放在数据点上时,也会显示提示信息。
2.3.1.2 model: 'index' 显示模式
<script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['红', '蓝', '黄', '绿', '紫', '橙'], datasets: [{ label: '示例', data: [12, 19, 3, 5, 2, 3], borderColor:'blue', borderWidth: 1, fill: false, }] }, options: { tooltips: { intersect: false, mode: 'index' } } }); </script>
运行效果
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script> <div style="width:400px;margin:0px auto"> <canvas id="myChart" ></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['红', '蓝', '黄', '绿', '紫', '橙'], datasets: [{ label: '示例', data: [12, 19, 3, 5, 2, 3], borderColor:'blue', borderWidth: 1, fill: false, }] }, options: { tooltips: { intersect: false, mode: 'index' } } }); </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-07-03 看起来好炫酷
我一定努力学习

好厉害的样子







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-11-06 这进度条怎么弄的呐
大源




站长的进度条弄的好看,这进度条怎么弄的呐
加载中

							

							


1 个答案

renshujia
答案时间:2019-12-11
目测是bootstrap



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-06-13 额,要是Echarts就好了
2019-06-13 使用jquery为什么不可以,必须用原生dom操作吗




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-chartjs-介绍 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图