数据可视化

日期:2014-8-13 20:02 | 标签: | 阅读:528

html的表现力毕竟有限,因此还需要借助其它辅助技术,svg和canvas就是其中之一,它们最大的问题还是浏览器的支持情况了。数据可视化听上去高大上,但最终还得落地,highcharts是国外非常优秀的一款图表,中文Api: http://api.hcharts.cn/highcharts ,这款图表是数据可视化的一个经典案例。再有就是国内外非常火的d3jsGITHUB,一种数据驱动的可视化js库。这些东东最终能够使得数据化落地...

备忘

进度:http://www.ourd3js.com/wordpress/149/

svg

详述见我的博文svg

d3入门

画布

  1. svg
    • SVG 绘制的是矢量图,因此对图像进行放大不会失真。
    • 基于 XML,可以为每个元素添加 JavaScript 事件处理器。
    • 每个图形均视为对象,更改对象的属性,图形也会改变。
    • 不适合游戏应用。
  2. canvas
    • 绘制的是位图,图像放大后会失真。
    • 不支持事件处理器。
    • 能够以 .png 或 .jpg 格式保存图像
    • 适合游戏应用

基本概念

六中基本图形+路径

矩形 <rect>、圆形 <circle>、椭圆 <ellipse>、线段 <line>、折线 <polyline>、多边形 <polygon>、 最强大的路径

d3的12种布局

饼状图(Pie)、力导向图(Force)、弦图(Chord)、树状图(Tree)、集群图(Cluster)、捆图(Bundle)、打包图(Pack)、直方图(Histogram)、分区图(Partition)、堆栈图(Stack)、矩阵树图(Treemap)、层级图(Hierarchy)。

n种图标类型

柱状图、饼图、 线图、散点图、雷达图、...

highcharts重要概念

legend:图例、 tooltip:鼠标hover时,数据点信息显示、 series:值数据配置、plotOptions:图表配置...(具体参见官网)

实践

// 画弧( x轴半径 y轴半径 x轴旋转 大角还是小角 顺时针(1)/逆时针(0)旋转 终点x 终点y)
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+

// d3画一个交互式的柱状图
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter().append("rect")
.attr("class","MyRect")   //把类里的 fill 属性清空
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
    return xScale(i) + rectPadding/2;
 } )
.attr("y",function(d){
        return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding )
.attr("height", function(d){
    return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill","steelblue")       //填充颜色不要写在CSS里
.on("mouseover",function(d,i){
        d3.select(this).attr("fill","yellow");
})
.on("mouseout",function(d,i){
        d3.select(this).transition().duration(500).attr("fill","steelblue");
});

// 绘制地图
d3入门系列:http://www.ourd3js.com/wordpress/296/

参考:http://dmitrybaranovskiy.github.io/raphael/reference.html

对比echarts与highcharts

区别嘛,去网上找找你会发现如下关键词,国内与国外(中文与英文)百度与非百度canvas与svg需要与不需要license... 个人觉得echarts更贴近中国(比如炫酷的中国地图),而且目前更新也很勤快,发展势头良好。api嘛,感觉差不多,图表基本的术语也就那几个,再说,如果一方出现优势,另一方抄过来就是了,本人不想太多纠结选哪个,有一点必须提下,echarts2的api用的真不爽,不知道echarts3咋样。

highcharts实践(updating)

redraw与reflow

redraw一般与setData一起使用,setData可以带两个参数,如果第二个参数指定为false,那么可以调用redraw进行刷新,而reflow是无条件刷新整图。

经典案例

阿里大屏实践 http://datavlab.org/2014/08/29/3754

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式