chart.js-折线图

使用最新版的chart.js

chart.js官网

先定义画布

<div class="bar-chart" style="width:50% !important;height:300px!important;float:left;posttion:relative"><h5 class="bar-title">当前周用户注册数一览表</h5><canvas id="currentWeekChart" width="400" height="300"></canvas>
</div>

定义数据集合
这里用的是静态数据,datasets里还有许多属性,可以到官网详查

 var data = {labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],datasets: [{label: "用户数量",backgroundColor: "rgba(0, 0, 0, 0.1)",//线条填充色pointBackgroundColor:"rgba(255,48,48,0.2)",//定点填充色data: [65, 59, 80, 81, 56, 55, 40]}]};

配置options选项(这个配置可以在对统计图的细节做调整)
这里的options是空的，具体需要哪些配置可以到官网查看每个配置项所代表的含义

var options = {};

获取canvas画布，开始画图

var ctx = document.getElementById("currentWeekChart").getContext("2d");
var currentWeekChart = new Chart(ctx,{type: 'line',data: data,options:options
});

效果图

如果有多条线时，只需在data里的datasets添加数据就行,如下

 var data = {labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],datasets: [{label: "用户数量",backgroundColor: "rgba(0, 0, 0, 0.1)",pointBackgroundColor:"rgba(255,48,48,0.2)",data: [65, 59, 80, 81, 56, 55, 40]},{label: "另一条线",backgroundColor: "rgba(255,62,150, 0.1)",pointBackgroundColor:"rgba(255,48,48,0.2)",data: [13, 79, 20, 40, 80, 2, 60]}]};

chart.js-折线图相关推荐

前端折线图中背景,Chart.js折线图设置背景颜色
I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image a ...
d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
js折线图设置y轴刻度_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
js折线图设置y轴刻度_d3.js实现自定义多y轴折线图
前言需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项.效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图. 基础这张图只用了d3.j ...
C#chart绘折线图动态添加数据
C#入门基础,实现chart控件动态添加数据源程序https://download.csdn.net/download/qq_42237381/10742048 目录一.效果示意二.原理说明三 ...
chart.js雷达图不显示刻度标签_Matplotlib从入门再也不放弃
本文使用 Zhihu On VSCode 创作并发布 display: false date: 2020-06-13 title: 掌握这几个概念就可以延迟放弃matplotlib作图 categor ...
chart.js 图表刷新_Chart.js的花式，响应式图表
chart.js 图表刷新 Data is all around us. While search engines and other applications work most optimally ...
html chart标签,用 Chart.js 画扇形图并显示标签
chart.js 扇形图 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
Web在jsp页面中生成柱状图，折线图，饼状图
一.前言在实际开发过程中,柱状图,折线图,饼状图在一些OA,ERP中是非常常见的功能,特别是需求方是业务型,数据分析型公司,下面的例子简单实现了饼状图,柱状图,折线图在jsp中生成.(ps:新手上路 ...

chart.js-折线图

chart.js-折线图相关推荐

最新文章

热门文章