初识js-charts和E-charts

时间 2019-11-12

原文原文链接

在前端开发的过程当中，常常会使用到图表相关的东西，不少时候，图表在展现数据方面有着无与伦比的优点。下面咱们就来看看两个经常使用的图表相关的插件jscharts和ECharts。前者，功能相对单一，可是不依赖任何其余插件；后者功能丰富，有时候须要依赖部分插件，咱们可根据须要选择合适的插件来使用。javascript

jscharts

什么是JS Charts?

JS Charts是一款基于JavaScript的几乎不须要再从新编码的图表编译器。经过它，使用JavaScript来绘制图表将会是一件很轻松的事情，由于你只须要使用客户端编码就能够实现，不须要额外添加其余插件或者服务端模块，只须要引入文件，准备好数据（xml，json或者数组），就能够生成图表！html

JS Charts能够用来绘制不一样类型的图表，例如饼状图，柱状图以及简单的折线图等等。前端

简单使用：java

（1）首先，咱们引入文件，咱们只须要引入一个js文件jscharts.js，它包含了主要的代码和用来适配ie浏览器的canvas函数。git

<script type="text/javascript" src="jscharts.js"></script>

（2）容器，第二步是准备一个未来用来容纳图表的容器，它能够是一个简单的div标签，这个标签必需要有一个独一无二的idgithub

<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>

　这个容器的内容将会被jschart渲染出来的图表代替。json

（3）绘制第一个图表，第三步，咱们须要几行JavaScript代码。包括：用于绘制图表的数据，简单的二维数组。每个子元素数组包含两个元素，这两个元素将是一个折线图的两个顶点，或者其余图表中的某个元素。canvas

	<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功能强大，这里对它就先写个简单的例子，其余强大功能用到的时候再深刻了解。　

1. 初识echarts
2. jscharts 图
3. JScharts快速入门
4. jsCharts插件的使用和去图标(提供jscharts无图标下载)
5. ECharts初步学习
6. 初步接触echarts
7. 菜鸟初学Echarts
8. 初识HTML和CSS2
9. 初识HTML和CSS
10. 初识python和pycharm
更多相关文章...
• 与传输层有关的基本知识 - TCP/IP教程
• XLink 和 XPointer 语法 - XLink 和 XPointer 教程
• 适用于PHP初学者的学习线路和建议
• IntelliJ IDEA 代码格式化配置和快捷键