又快又好!巧用ChartJS打造你的实用折线图

最终效果

本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。

要实现最终效果,我们要分三步走:

  1. 生成折线图;

  2. 生成自定义提示;

  3. 生成图示(折线显示控制板)

生成折线图

首先,我们要设置折线图的位置。

<div style="width:50%">
<div id="line-legend">
</div>
<div>
<canvas id="line-chart" height="450px" width="800px"></canvas>
</div>
</div>

我们将图表放置于id为line-chartcanvas中,而图例则在id为line-legenddiv中。

接着,我们要生成折线图。

设置x轴数据

var x_labels = ["January","February","March","April","May","June","July"];

设置y轴数据

var default_datasets = [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
];

将x轴和y轴的数据打包成数据包

 var lineChartData = {
labels : x_labels,
datasets : default_datasets
};

设置显示的效果(这里是直接从官网示例里copy过来的:-)

 var lineChartOptions = {
//Boolean - If we should show the scale at all
showScale: true,
...
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
};

生成折线图

var lineChartCanvas = chart.get(0).getContext("2d");
var lineChart = new Chart(lineChartCanvas);
var line_chart_handle = lineChart.Line(lineChartData, lineChartOptions);

本阶段效果

以上示例可参考官方教程

自定义提示

刚才我们成功地绘制了一张图表,但是基本图表中的提示只显示了折线的颜色和值,我们还希望能把折线的名称也加上,那到底该怎么做呢?

很简单,这个功能属于图表的要显示的效果,还记得刚才我们设置的lineChartOptions吗,它就是设定显示效果的参数。只要在其中设定一项新的参数multiTooltipTemplate即可,该参数用于自定义数据提示tooltip。

 multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>"

上面的代码是什么意思呢?大致可以看出,是给multiTooltipTemplate赋了一个值,而这个值就是我们想要显示的数据的样式。你大概猜到了,datasetLabel其实就是折线标题的变量。

该功能虽然简单,但基本上出图表都会用到,所以在此专门用一节来说明。

生成图示

终于到达我们的重头戏,现在要来实现图示功能了。

我们再将这个大目标划分为两个具体的小目标:
首先,我们先将图示展示出来;
接着,点击图示之后,动态显示或隐藏指定的折线。

添加展示图示

我们之前已经设置好了图例所在,现在填入两个checkbox。

<div id="line-legend">
<ul class="line-legend">
<li class="checkbox-five">
<input type="checkbox" name="line-legend" value="0" checked="checked">
<label for="line-legend" style="background-color:rgba(220, 220, 220, 1);">
</label>
<span>My First dataset</span>
</li>
<li class="checkbox-five">
<input type="checkbox" name="line-legend" value="1" checked="checked">
<label for="line-legend" style="background-color:rgba(151, 187, 205, 1);">
</label>
<span>My Second dataset</span>
</li>
</ul>
</div>

添加曲线选项事件响应

为两条折线添加了checkbox,但点击了它折线也没有变化。没关系,我们现在来为折线添加上事件响应,使得图表能自由显示或是隐藏折线。

// 给图例中的选框增加事件响应
// 被选中的则显示其对应折线,未选中的不显示
$('[name = \'line-legend\']:checkbox').each(function(key, value) {
// 设置所有的checkbox为选中
$(this).attr('checked', true);
// 设置checkbox被取消选择之后,将该曲线消除
$(this).click(function() {
// 显示相应的折线
} else {
// 删除被选中折线上的点
}
});

现在我们为checkbox添加上了事件响应,具体的响应事件将在下一节说明。

ChartJS数据结构

要想知道如何让折线从图表中显示出来,或是消息,首先要来了解曲线的数据结构。
ChartJS里的点是由数据包构成的,而一个数据包分成两部分:一块包含点的信息,一块用于显示该点。

了解了ChartJS上折线图的数据结构,大家也就明白了:显示一条折线,即是添加points;隐藏一条折线,即是将其points去除。

所以,当某一条曲线被选中时,我们就根据该曲线的信息生成新的点;

if ($(this).is(':checked')) {
// 插入被选中折线上的点
$.each(y_datasets[index].data, function(key, value) {
line_chart_handle.datasets[index].points.push(new line_chart_handle.PointClass({
value : value,
label : lineChartData.labels[key],
datasetLabel : lineChartData.datasets[index].label,
x: line_chart_handle.scale.calculateX(line_chart_handle.scale.valuesCount + 1),
y: line_chart_handle.scale.endPoint,
strokeColor : line_chart_handle.datasets[index].pointStrokeColor,
fillColor : line_chart_handle.datasets[index].pointColor
}));
});
}

当一条曲线被取消选中时,我们只需要将这条曲线上的点到清空即可。

else {
// 删除被选中折线上的点
for (var i = line_chart_handle.datasets[index].points.length - 1; i >= 0; i--) {
line_chart_handle.datasets[index].points.shift();
}
}

大功告成!

示例下载

下载地址:百度云http://pan.baidu.com/s/1c00oYJm

注:如果链接失效了,私信我吧~(希望你不要以为我有别的企图)

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hib1kaibbaa

又快又好!巧用ChartJS打造你的实用折线图的更多相关文章

  1. swift:打造你自己的折线图

    看到苹果Health里的折线图了吗.我们就是要打造一个这样的折线图.没看过的请看下图. 我们的主题在于折线图本身.其他的包括步数.日平均值等描述类的内容这里就不涉及了. 首先观察,这个图种包含些什么组 ...

  2. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  3. Chartjs 简单使用 ------ 制作sin cos 折线图

    Chart.js 一款简单干净的图表工具,基于html5 的Javascript. 可以用来制做条形,扇形,折线,混合等等的强大工具 图表要放在html 的  cancas  标签中 <canv ...

  4. 你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床

    你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 经过前面两弹的介绍,相信大家对图床都不陌生了吧, 但是小魔童觉得这样做法还是不方便,使用 ...

  5. 巧用ViewPager 打造不一样的广告轮播切换效果

    一.概述 如果大家关注了我的微信公众号的话,一定知道我在5月6号的时候推送了一篇文章,文章名为Android超高仿QQ附近的人搜索展示(一),通过该文可以利用ViewPager实现单页显示多个Item ...

  6. 巧用渐变色打造精致移动端APP

    渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩,充满变幻无穷的神秘浪漫气息的颜色.在扁平化设计刚刚兴起时,渐变是设计师们避之不及的设计手法.然而自从Instagram ...

  7. Ubuntu1404: 将VIM打造为一个实用的PythonIDE

    参考:  http://www.tuicool.com/articles/ZRv6Rv 说明: 内容非原创, 主要是做了整合和梳理. 在 ubuntu14.04 & debian 8 下测试通 ...

  8. MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

    前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...

  9. 打造一个简单实用的的TXT文本操作及日志框架

    首先先介绍一下这个项目,该项目实现了文本写入及读取,日志写入指定文件夹或默认文件夹,日志数量控制,单个日志大小控制,通过约定的参数让用户可以用更少的代码解决问题. 1.读取文本文件方法 使用:JIYU ...

随机推荐

  1. [csi]浅聊ceph-csi组件

    描述   ceph-csi扩展各种存储类型的卷的管理能力,实现第三方存储ceph的各种操作能力与k8s存储系统的结合.调用第三方存储ceph的接口或命令,从而提供ceph数据卷的创建/删除.挂载/解除 ...

  2. k8s命令行web代理神器gotty

    目录 介绍 安装 使用示例 -p 指定端口 -c 指定账号密码 -w 支持tty交互 --permit-arguments 支持get参数传参 --random-url 生成随机地址 --reconn ...

  3. LGP5044口胡

    套路题. 对于这一类与 \(\max\) 有关的题,优先考虑笛卡尔树. 建出笛卡尔树,考虑处理以某个点 \(u\) 举办会议时,参加会议的成本. 这里考虑询问区间为 \([1,n]\). 明显 \(u ...

  4. LGP5386题解

    写在前面的废话 自己写了两天,调了半天,然后jzp来帮忙调了一个小时,终于过了 过的时候耳机里放着桐姥爷的bgm,就差哭出来了 题解 首先这题没有部分分差评( 值域不变 我们可以注意到,如果一个区间全 ...

  5. 背包四讲 (AcWing算法基础课笔记整理)

    背包四讲 背包问题(Knapsack problem)是一种组合优化的NP完全问题.问题可以描述为:给定一组物品,每种物品都有自己的重量和价格,在限定的总重量内,我们如何选择,才能使得物品的总价格最高 ...

  6. Redis常见延迟问题定位与分析

    Redis作为内存数据库,拥有非常高的性能,单个实例的QPS能够达到10W左右.但我们在使用Redis时,经常时不时会出现访问延迟很大的情况,如果你不知道Redis的内部实现原理,在排查问题时就会一头 ...

  7. CentOS停更;阿里发布全新操作系统(Anolis OS)

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 Linux系统对于Java程序员来说,就好比"乞丐手里的碗",任何业务都离不开他的身影,因为服务端的广泛使用,也因此衍生出了各种 ...

  8. JDK8的 CHM 为何放弃分段锁

    概述 我们知道, 在 Java 5 之后,JDK 引入了 java.util.concurrent 并发包 ,其中最常用的就是 ConcurrentHashMap 了, 它的原理是引用了内部的 Seg ...

  9. Linux移植总结--uboot从不同介质上启动分析

    @ 目录 1.启动地址 2.uboot占用内存 3.2440从NAND启动 4.2440从NOR启动 5.某开发板从SPI FLASH启动 1.启动地址 先以2440开发板为例,SDRAM(0x300 ...

  10. springcloud学习03-spring cloud eureka(下)

    7.配置服务提供者(生产者) 7.1.配置resources/application.yml. 值eureka.client.service-url(或serviceUrl).defaultZone是 ...