码迷,mamicode.com
首页 > 其他好文 > 详细

数据可视化实现

时间:2016-11-18 14:12:44      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:使用   rip   准备   iphone   init   连接数   效果   sheng   view   

数据挖掘:用可视化效果展现你的数据
http://www.leiphone.com/news/201406/warlial-visualization.html

国内比较流行的Echarts
优点,良好的api和配置项手册,使用方便,修改方便,可以满足基本需求
国外的有d3js。功能强大,案例超多,精细加很酷炫,上手难


Echarts

使用方式:
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>

如果是地图的项目需要引入相关地图js文件

<script src="../china.js"></script> 中国地图
<script src="../jquery-1.7.2.js"></script>
<script src="../world.js"></script> 世界地图
各个城市都有地图js

<body>

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->

<div id="main" style="width: 800px;height:600px;"></div>


<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例

var myChart = echarts.init(document.getElementById(‘main‘));
//实例化好myChart对象备用

.
.
.
.
复制官方案例在此处
其中注意事项
1. app.title 去掉
2. 数据的获得方式
1.直接写在index中,可以直接使用,但是文件臃肿,不建议
2.使用ajax获取本地文件,
. 3.jsonp使用别的连接数据
.
.
.


// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

</script>

 

深入学习这里有一些例子,可以下载实际操作

https://github.com/shengxinjing/imooc-echarts

 


d3js
利用原有的例子结构 更换自己的数据 也可以改变结构上的样式和画布大小

http://www.open-open.com/lib/view/open1387100056093.html

数据可视化实现

标签:使用   rip   准备   iphone   init   连接数   效果   sheng   view   

原文地址:http://www.cnblogs.com/wangjie-001/p/6077499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!