|
|
|
步骤 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>
因为站长准备做的 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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-07-03
看起来好炫酷
2019-11-06
这进度条怎么弄的呐
2019-06-13
额，要是Echarts就好了
2019-06-13
使用jquery为什么不可以，必须用原生dom操作吗
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
