⼤数据可视化html+css+js源码_CSX：⼀种编写可视化图形的
新⽅式
引⾔
⼀直以来，前端在编写可视化图形或图表时会使⽤各种各样的库。常见的⽆外乎hightcharts、echarts，还有图形语法的g2。
它们的特性和优劣这⾥不作讨论，我只想谈谈⾃⼰在平常遇到的场景中使⽤遇到的问题，以及针对这些提出的想法。
库要解决的⼏个问题，⾸先是跨平台。这⾥的平台是指canvas和svg平台。只要2者可以简单⽆缝切换，那么pc、移动、⼩程序……理论就都没问题了。其实主要是⼩程序不⽀持svg。另外根据实际情况不同，cavans和svg的性能表现会有差异。
echarts曾经总结过⼀篇：
羡辙：Canvas or SVG？⼀张好图，两⼿准备，就在 ECharts 4.0z huanlan.zhihu
库都是直接被使⽤，这就意味着复杂多变的需求很难定制化，千奇百怪的ui设计更是难以满⾜。于是使⽤这些库的同时，功能也就被彻底限制住了。想要⾃定义？通读源码⾃⼰修改的成本有多⼤……
于是库便会出现越来越多的配置，眼花缭乱的同时未必还能满⾜。
图形语法似乎能解决⼀些问题，它采⽤⼀系列如公式般的短语描述图形，然后绘制。但是这只能解决⼏何图形对应数据关系的问题，其它⼤量功能还是需要配置。并且它的理解学习成本也很⾼，⾃定义需求仍未解决。
什么是csx？
csx取名借鉴⾃jsx，Canvas-Svg-Xml，根据根节点的不同，⾃动切换为canvas或svg类型，两者功能完全等价。
按照传统，这⾥有Hello World的第⼀个例⼦：svg canvas
<canvas width="360" height="360">
<span>Hello world!</span>
</canvas>
<svg width="360" height="360">
<span>Hello world!</span>
</svg>
Hello, world!
csx所做的核⼼事情有3件：
1. 实现⼀个精简的css布局引擎，统⼀表现模式；
2. 实现css标准样式渲染，抹平canvas和svg的差异；
3. 借鉴svg标准增加基本图形节点语法，实现⼏何绘图。
兼容实现⿇烦、复⽤难统⼀标准
复⽤难统⼀标准的问题。
学习维护成本⾼、兼容实现⿇烦
布局处理困难、学习维护成本⾼
如此解决了绘图中布局处理困难
依旧是个简单的例⼦，展⽰了block和inline元素在canvas/svg中布局后绘制的结果：
csx
说到布局，弹性布局flex就不得不提起，其在css3中被引⼊，是个⼗分强⼤的布局⽅式，已成为如今⾸选的主流⽅式。
作为css布局的核⼼功能之⼀，是必须要被⽀持的：
flex
其它诸如绝对定位、相对定位、边框、边距、颜⾊、背景⾊、⼤⼩、字号、⾏⾼、渐变、变形等不⼀⼀赘述。我写了个简单的⼊门教程demo系列，链接在末尾，可以点进去看下。
on{Event}形式书写，被顶层canvas/svg劫持，内部计算适配后响应。
事件的⽀持同jsx⼀样，采⽤on{Event}
⾄于为什么，canvas只是⼀张⼆维图像，svg也只是个绝对定位的dom，必须经过计算后才能得知到底哪个事件应该正确响应。
event
接下来是个重要组成部分，dom+css解决了结构描述和布局样式的问题，那么那些⽮量⼏何图形呢？
别慌，csx规定了以$$开头的标签为图形标签，并且借鉴svg标准内置了基本的形状：
geom
仅仅是基本形状还不够，假如⽤到其它没有的怎么办？想要复⽤⾃定义的形状怎么办？
继承形状基类并实现它即可：
custom
数据或样式改变需要重绘。对于canvas来说很简单，清除后再绘制即可；对于svg来说不能这样做，因为整段重新⽣成html来说成本太⼤，解法就是常见的dom-diff。
这个例⼦还额外演⽰了js动画的效果：
dom-diff
内部事件计算适配响应已经很精准，不仅考虑的实际位置，还包括各种形变。
willResponseEvent⽅法。
对于⾃定义图形，如果有更精确或其它⾃定义需求，可以覆盖willResponseEvent
下⾯是⼀个展⽰点击必须在圆内⽽不是圆所在矩形的例⼦：
response-event
ui测试是个⾮常⿇烦的事情，这⾥提供了⼀种⽤virtual-dom来测试的⽅法：
test
css规范、零学习成本
易维护的特点。
零学习成本、易维护
折线图是最常见的图表之⼀。这⾥以其为例，展⽰了如何编写⼀个折线图，体现出代码量少
代码量少、css规范
图表中除了折线部分是⼏何图形外，其它均可表现为普通的dom+css，零成本对前端开发⼈员极为友好。 即便是⼏何图形标签，也很贴合dom和svg标准，只有⼏个简单的属性配置。
chart
想要3d效果？
没问题，css中transform可以简单地办到（伪）：
3d
更加绚丽的还有⽕苗燃动效果。
⼀句话，有了css，ui真的变得⼜简单⼜强⼤：
flare
其他
⽬前实现csx的框架karasjs还很初级，许多⾼级功能尚未实现。许多设计想法如有不成熟的地⽅，请多多指教。
除了⼏何图形，代码的复⽤还需更多，⽐如组件Component。
android和ios也⽀持canvas/svg，扩展⾄native是否可以完成复⽤同⼀套代码？
⽽对于动画⽽⾔，js动画⽐较⾃定义但是⿇烦，css的transition和animate会是更好的⽅案吗？
⼀切都在未来继续……
后续⽂章：
阿侎：CSX：⼀种编写可视化图形的新⽅式（⼆）z huanlan.zhihu

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。