chart.js使用学习——折线图（1：基本用法)

折线图，即在直角坐标系中用直线串起来的一系列点形成的图形。在excel、ppt等办公软件中经常见到折线图，应用系统中也有不少统计汇总功能以折线图形式展示。本文根据参考文献1-2学习chart.js中折线图的基本使用方式。
首先看参考文献2中给出的折线图示例效果（对代码进行了微调)，如下图所示。
页面中使用chart.js的大致步骤包括数据准备和创建Chart对象，也可以将数据准备放在Chart对象的构造函数中。
关键的代码如下图所示。首先获取绘制折线图的Canvas对象，接着是数据准备，lables对象用于标识坐标系数据点x轴的标签。data变量保存折线图需要的数据及其它绘图配置。数据准备好之后，创建Chart对象，将canvas对象、绘图类型及绘图数据传递给chart对象即可生成上图所示的折线图。

    var ctx = document.getElementById('myChart');const labels = months({count: 7});const data = {labels: labels,datasets: [{label: '折线图测试',data: [65, 59, 80, 81, 56, 55, 40],fill: false,borderColor: 'rgb(75, 192, 192)',tension: 0.1}]};var lineChart = new Chart(ctx, {type: 'line',data: data,});

data中可以包含多组数据，如果绘制多条折线，可以在datasets中增加多组数据，示意代码及效果图如下所示：

     const data = {labels: labels,datasets: [{label: '折线1',data: [65, 59, 80, 81, 56, 55, 40],fill: true,borderColor: 'rgb(75, 192, 192)',tension: 0.1},{label: '折线2',data: [85, 79, 100, 101, 76, 75, 60],fill: true,borderColor: 'rgb(175, 92, 92)',tension: 0,showLine:true}]};

datasets中可以配置的属性有很多，详细的说明可以查看参考文献2。本文中使用的属性主要有四个，包括：
1）borderColor：设置折线的颜色，
2）fill：取值为true和false，默认为false，用于控制是否填充折线与X轴的中间区域，单条折线和多条折线时的效果如下：
3）tension：默认值为0，即绘制直线，大于0的话则点与点用曲线连接，其对比图如下所示，折线1的tension设置为1，而折线2的tension设置为0：

4）showLine：取值为true和false，默认为true。设置为false则仅显示折线图中的点，不会显示直线。其对比图如下所示，折线1的showLine设置为true，而折线2的showLine设置为true。
才开始学习使用chart.js的折线图，对chart.js的理解也不深入，后续还会继续学习chart.js的基本概念，同时进一步学习折线图的配置和使用。

参考文献：
[1]https://chartjs.bootcss.com/docs/charts/line.html
[2]https://www.chartjs.org/docs/latest/charts/line.html

chart.js使用学习——折线图（1：基本用法)相关推荐

原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
chart.js使用学习——雷达图
雷达图以二维形式综合对比多组数据的差异,常用于比较2组或更多组数据集[1].chart.js中雷达图的数据准备与其它图形相同,主要差异在于创建chart对象时,图形类型需指定为"rada ...
数据可视化清新版【chart.js】学习笔记8.0—极地图(Polar Area)
Polar Area--(极地图) 极地面积图类似于饼图,但每个线段具有相同的角度 - 线段的半径因值而异.当我们想要显示类似于饼图的比较数据,同时也要显示上下文的值的范围时通常使用这种类型的图表. ...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...
python 折线图尾部_Matplotlib 折线图plot()所有用法详解
散点图和折线图是数据分析中最常用的两种图形.其中,折线图用于分析自变量和因变量之间的趋势关系,最适合用于显示随着时间而变化的连续数据,同时还可以看出数量的差异,增长情况. Matplotlib 中绘制 ...
chart.js使用学习——饼图/环形图
饼图/环形图能够展示数据集中各项的大小与各项总和的比例.chart.js中创建饼图/环形图,只需在chart构造函数中指定图表类型为pie/doughnut即可. 基本用法创建饼图/环形图主 ...
chart.js使用学习——散点图
之前介绍折线图时提到过,如果将数据集的showLine设为false,则绘制图形时只会绘制点,不会绘制点与点之间的连线,这其实就是散点图.chart.js中有单独绘制散点图的类型,即scatter ...
图表插件 - chart.js (柱状图) 学习总结
chart.js 基于H5的canvas,轻量级的图表插件. 有6中图表类型:折线图.条形图.雷达图.饼图.柱状图.极地区域图关于柱状图的绘制,追加 .更新.删除数据等操作的总结原文来自于:htt ...
chart.js使用学习——柱状图（1：基本用法)
柱状图属于以长方形的长度为变量的统计图表[1].chart.js创建图形的方式都类似,先是数据准备,然后在chart构造函数中指定图表类型. 如下列代码及效果图所示,chart类中将类型指定为 ...

chart.js使用学习——折线图（1：基本用法)

chart.js使用学习——折线图（1：基本用法)相关推荐

最新文章

热门文章