初识js-charts和E-charts
在前端开发的过程中,经常会使用到图表相关的东西,很多时候,图表在展示数据方面有着无与伦比的优势。下面我们就来看看两个常用的图表相关的插件jscharts和ECharts。前者,功能相对单一,但是不依赖任何其他插件;后者功能丰富,有时候需要依赖部分插件,我们可根据需要选择合适的插件来使用。
jscharts
什么是JS Charts?
JS Charts是一款基于JavaScript的几乎不需要再重新编码的图表编译器。通过它,使用JavaScript来绘制图表将会是一件很轻松的事情,因为你只需要使用客户端编码就可以实现,不需要额外添加其他插件或者服务端模块,只需要引入文件,准备好数据(xml,json或者数组),就可以生成图表!
JS Charts可以用来绘制不同类型的图表,例如饼状图,柱状图以及简单的折线图等等。
简单使用:
(1)首先,我们引入文件,我们只需要引入一个js文件jscharts.js,它包含了主要的代码和用来适配ie浏览器的canvas函数。
<script type="text/javascript" src="jscharts.js"></script>
(2)容器,第二步是准备一个将来用来容纳图表的容器,它可以是一个简单的div标签,这个标签必须要有一个独一无二的id
<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>
这个容器的内容将会被jschart渲染出来的图表代替。
(3)绘制第一个图表,第三步,我们需要几行JavaScript代码。包括:用于绘制图表的数据,简单的二维数组。每一个子元素数组包含两个元素,这两个元素将是一个折线图的两个顶点,或者其他图表中的某个元素。
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.draw();
</script>
简单的说明一下,首先定义数据,然后选择我们写好的容器,加上类型参数,创建新的图表对象。第三步,设置图表对象用来渲染的数据,最后,绘制。(使用免费版的时,会自动添加他们产品的logo)
使用xml数据绘制:
<?xml version="1.0"?>
<JSChart>
<dataset type="bar">
<data unit="10" value="20"/>
<data unit="15" value="10"/>
<data unit="20" value="30"/>
<data unit="25" value="10"/>
<data unit="30" value="5"/>
</dataset>
</JSChart>
var myChart = new JSChart('chartcontainer', 'bar');
myChart.setDataXML('data.xml');
myChart.draw();
使用json数据绘制:
{
"JSChart": {
"datasets": [
{
"type": "pie",
"data": [
{
"unit": "Unit_1",
"value": "20"
}, {
"unit": "Unit_2",
"value": "10"
}, {
"unit": "Unit_3",
"value": "30"
}, {
"unit": "Unit_4",
"value": "10"
}, {
"unit": "Unit_5",
"value": "5"
}
]
}
]
}
}
var myChart = new JSChart('chartcontainer', 'pie');
myChart.setDataJSON('data.json');
myChart.draw();
(4)去除水印:
如果免费版,将会始终有一个logo水印,可以使用网友提供的免费方案去除水印:“在 jscharts.js文件中搜索fs.bg一共出现二处,根据版本不同,bg后面的不一样我的出现的是fs.bg.2v然后删除这二句代码,把后面的括号和分号也一起删除啊
然后logo水印就去掉了,标题中还有 JS charts ,这个是如果你在JS中不指定标题,默认打印的,所以需要设置一下标题,myChart.setTitle('title'); 在文件中的初始化代码处处加上这句代码就OK了,title换成你要的标题,注意一定要在myChart.draw();之前设置标题 ”。
通过使用购买版的key 也可以去除水印,使用方式如下:
<script type="text/javascript">
var myData = new Array([10, 20], [15, 10], [20, 30], [25, 10], [30, 5]);
var myChart = new JSChart('chartcontainer', 'line', 'b4949a117e0bff9be30');
myChart.setDataArray(myData);
myChart.draw();
</script>
ECharts
ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
下载的时候我们有很多选择,根据自己需求下载合适版本即可:
简单使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.min.js" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
由于,echarts功能强大,这里对它就先写个简单的例子,其他强大功能用到的时候再深入了解。
初识js-charts和E-charts的更多相关文章
- 初识JS正则表达式
初识JS正则表达式 看到的使用的正则表达式练习:http://www.cnblogs.com/wenanry/archive/2010/09/06/1819552.html PS:本文参考李炎恢JS笔 ...
- 学习JS的第一天--初识JS
1.初识JS a.我的第一个JS程序: document.write("Hello JS")://这段代码是输出到body中就是直接打开就可以看到: console.log(&qu ...
- 初识js(第一篇)
初识javascript js是前端中作交互控制的语言,有了它,我们的前端页面才能"活"起来.学好这么语言显得非常重要,但是存在一定难度,所以一定要认真学习,充满耐心. js书写规 ...
- 初识js中的闭包
今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...
- JavaScript学习总结【1】、初识JS
1.什么是 JavaScript? JavaScript 是一门跨平台.面向对象的动态的弱类型的轻量级解释型语言,是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.应用于 HTML 文档能够在 ...
- 初识JS
今儿我遇到一特别恐怖的事儿,JS 刚开始的我看到JS感觉是懵逼的,翻开第一页,感觉是棒棒哒,再看第二页,感觉是easy的,看到第三页是恐怖的,当看到的第四页的时候,我感觉今年的清明节是为我准备的 废话 ...
- JavaScript学习笔记(一)——初识js
这个周,开始了JavaScript的学习路程.虽然从高中开始就接触了网页设计的知识,大学里的学习也算回顾了Html和Css的知识,实习期间在牛盾科技也是做的网站建设,不过通过前段时间找工作才发现自己了 ...
- JavaScript基础知识(初识JS)
js的组成部分 1. ECMAScript : JS的基础语法 变量 数据类型,操作语句,函数 es3 es5 es6; 2.DOM : document object model : 文档对象模型: ...
- 初识JS 基本语法.基本运算符
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...
- 前端基础 & 初识JS(JavaScript)
JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...
随机推荐
- SSH免密码远程登录Linux
1. 有A,B两台机(Linux/unix), 要想从A用ssh远程登录到B上(假设各自的IP,A:192.168.100:B:192.168.1.104). 2. 在A机上,用“ssh-keygen ...
- 【wireshark】总体结构
1. 总体结构 wireshark的总体结构如下图所示. 2. 功能模块 模块名 功能 源码子目录 GTK/Qt 处理所有的用户输入/输出(所有的窗口,对话框等等) /ui GTK: /ui/gtk ...
- 组件基础—Vue学习笔记
ammm学习Vue有好几天了,今天遇到难点所以打算写一点随笔加深印象. 一.首先最简单的创建组件 1全局组件 Vue.component() Vue.component('hello',{ tem ...
- Django的常用方法以及配置
在setting 中配置能生成 sql log 的内容 LOGGING = { , 'disable_existing_loggers': False, 'handlers': { 'console ...
- mysql 执行 sql 语句提示Parameter '@XXX' must be defined
执行 sql 语句 MySqlException: Parameter '@maxNo' must be defined. 执行 sql 中含有自定义变量 @maxNo,抛出异常 解决方法: 连接字符 ...
- How React Works (一)首次渲染
How React Works (一)首次渲染 一.前言 本文将会通过一个简单的例子,结合React源码(v 16.4.2)来说明 React 是如何工作的,并且帮助读者理解 ReactElement ...
- 搭建hadoop_之 创建3个虚拟机配置好网络
(创建3个虚拟机,1个作为主服务器,二个作为从节点) 一.安装虚拟机 Windwos:VMware Workstation Pro MAC:VMware Fusion 安装: ** 创建空 ...
- Eclipse删除switch workspace下多余的workspace
第一步:修改org.eclipse.ui.ide.prefs 文件 打开Eclipse目录的\configuration\.settings目录,找到org.eclipse.ui.ide.prefs ...
- R语言运算符
运算符是一个符号,它告诉编译器执行特定的数学或逻辑操作. R语言丰富的内置运算符,并提供以下类型的运算符. 运算符类型 在R编程中有以下类型的运算符 - 算术运算符 关系运算符 逻辑运算符 赋值运算符 ...
- Ubuntu系统下开发人员常用工具、命令和技巧
在新的Ubuntu系统安装完成后,开发人员一般需要下载.安装一些必备的工具,并进行一系列的环境配置等操作,本文对此做出一些总结,方便今后新开发环境的初始化. 一.文件常用安装目录和命令 一般的deb包 ...