G2 2.0 更灵活、更强大、更完备的可视化引擎！

   <h2><strong>概述</strong></h2>    <p>G2作为一款技术产品，自诞生以来，服务于广大的Web工程师群体和一部分数据分析师。一直来，G2 因其易用的语法和扎实的可视化理论基础，广受使用者好评。G2 1.x 的可视化能力已经非常强大，使用者已经能够在掌握图形语法的基础上结合自己对数据的理解，从而绘制出各种各样的可视化图表。然而，随着DT时代的更加深化，随着G2的发展，我们还是遇到了各种各样的，以往G2无法满足的可视化需求。经总结发现，大体上有以下几点：</p>    <ol>     <li>数据导向，同一张图表中，绘制 异构数据 图形的需求</li>     <li>设计导向，对图形 高度订制 的需求</li>     <li>移动端图表 轻量化 的需求</li>    </ol>    <p>经过半个月设计和架构，我们重新梳理流程结构，我们提出了 视图（View） 和 映射核心（Core） 的概念，再经历了一个月紧锣密鼓的开发，本周我们迎来的G2 2.0的发布!</p>    <p>话不多说，下面咱具体看看G2.0的新特性 ~</p>    <h2><strong>新特性</strong></h2>    <h3><strong>一、多视图（View）</strong></h3>    <p>G2 2.0 我们进行了多View的支持。每一个View可以拥有自己的数据源。意味着2.0后我们可以在同一幅图表中，支持异构数据的图表绘制。详见 <a href="/misc/goto?guid=4959714872588229355" rel="nofollow,noindex">链接</a></p>    <p>具体场景</p>    <pre>  场景一  用户甲：请问我有一组数据，画了一张区域图，还有一组数据是用来标定每个关键时刻的特殊值，怎么办？  1.0菌：关键时刻数据用chart.guide()吧  用户甲：可是guide好繁琐。。  1.0菌：。。。  2.0菌：你可以使用我的多View的功能！</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8fe7132b1f26435813151a70b09a082e.png"></p>    <pre>  场景二  用户乙：我这有一组数据画了地图气泡图，还有另外一组数据表示气泡之间的关系，怎么办？  1.0菌：这个臣妾做不到。。  用户乙：。。。  1.0菌：。。。。  2.0菌：你可以使用我的多View的功能！</pre>    <p><img src="https://simg.open-open.com/show/8e9c8ce8e8b45f1f5dfbf8d1b0f9d2dc.png"></p>    <h3><strong>二、自定义图形（Shape）</strong></h3>    <p>在G2 2.0 中我们拓展了自定义的Shape的机制，赋予那部分有 高订制需求的 、 有图形知识储备 的工程师有直接订制最终图形的能力。这也是G2在向 可编程可视化引擎 迈出的重要一步。详见 <a href="/misc/goto?guid=4959714872705077527" rel="nofollow,noindex">链接</a></p>    <p>具体场景</p>    <pre>  场景一  某PD：我这有一份不同人物的得分数据，怎么可视化比较好？  1.0菌：可以用柱状图对比  某设计师：柱子直角不好看，改成圆角吧  1.0菌：暂时还没有内置圆角矩形的shape。。  某PD：不够形象，要把人物头像发上去  1.0菌：。。。。  2.0菌：你可以使用我的自定义Shape的功能！</pre>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/9055f575042e8fe38fbd930ca6cea269.png"></p>    <pre>  场景二  某前端：你们原来的仪表盘好丑啊！  某设计：钟表能不能再假点呐！</pre>    <p><img src="https://simg.open-open.com/show/6f9b3bdf7f1e4a277a54cb57e2701bdd.png"></p>    <pre>  1.0菌：无法反驳！  某前端：我想要这样xxo!!xxx@@oox&&（持续描述五分钟。。。）  1.0菌：把这些代码都加到我身上，我会膨胀死。。。  2.0菌：使用我的自定义Shape的功能！在G2外自由拓展，私人定制，满足你无限强迫的定制需求！</pre>    <p><img src="https://simg.open-open.com/show/bbb226ee8ca063f956e432cf48c80b59.png"></p>    <h3><strong>三、连线图形标记（Edge）</strong></h3>    <p>基于以上两个重点功能的实现，再加上连线的几何标记（Edge），我们终于能画出，简单的 <a href="/misc/goto?guid=4959714872806645313" rel="nofollow,noindex">关系图</a> 了！（喜大普奔）</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6ef2bcf02afa1c9f65b63568d60e8df0.png"></p>    <h3><strong>四、移动端的支持</strong></h3>    <p>G2-mobile为了移动端的开发宝宝已经操碎了心。</p>    <p>为了你们想要的简单而美好，作为强大G2的一个子集，我们忍痛割掉了各种洋气的功能；</p>    <p>为了让你们在G2和G2-mobile之间切换得心应手，我们把G2-mobile的接口和G2全部统一；</p>    <p>为了满足你们多样性的需要，我们开放了更多自定义接口。详见 <a href="/misc/goto?guid=4959714872906892003" rel="nofollow,noindex">G2-mobile说明</a></p>    <h2><strong>更丰富、更用心的图表DEMO</strong></h2>    <h3><strong>PC Demo</strong></h3>    <p>详细见 <a href="/misc/goto?guid=4959714872806645313" rel="nofollow,noindex">G2 Demo中心</a></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/75ff590884296b69427008c832447d7d.png"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/58325684bd5a3df33eb5afb94de556ae.png"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4a0a6a05ebe2c7c519aaedbf6eed5984.png"></p>    <h3><strong>Mobile Demo</strong></h3>    <p>详细见 <a href="/misc/goto?guid=4959714873019823418" rel="nofollow,noindex">G2-Mobile Demo中心</a></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/9bd7155cef2f14019489b39ba4ea43f7.png"></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/ad159393e112e9010b74667525be9143.png"></p>    <h2><strong>升级指南</strong></h2>    <h3><strong>PC 端</strong></h3>    <p><strong>新增</strong></p>    <ul>     <li>自定义 shape</li>     <li>多视图 View 功能，支持图表组合和异构数据的绘制</li>     <li>新增 edge 几何标记，用于支持关系图的绘制</li>    </ul>    <p><strong>移除</strong></p>    <ul>     <li>chart.legendVisible() 废除，不再支持</li>     <li>chart.legend('left|top|right|bottom') （即原先直接传入位置字符串来设定图例位置 ） 废除，不再支持</li>     <li>移除了部分 G2 默认提供的 shape:</li>    </ul>    <table>     <thead>      <tr>       <th>对应的 GEOM</th>       <th>废弃的 shape</th>      </tr>     </thead>     <tbody>      <tr>       <td>point</td>       <td>pointerArrow</td>      </tr>      <tr>       <td>point</td>       <td>pointerLine</td>      </tr>      <tr>       <td>point</td>       <td>pointerRect</td>      </tr>      <tr>       <td>interval</td>       <td>stroke</td>      </tr>      <tr>       <td>polygon</td>       <td>stroke</td>      </tr>     </tbody>    </table>    <h3><strong>Mobile 端</strong></h3>    <p><strong>新增</strong></p>    <ul>     <li>chart.guide() 方法：支持的辅助类型有：折线(line)、弧线(arc)、文字(text)和自定义(html)</li>     <li>新增的图形绘制属性：      <ul>       <li>fill</li>       <li>stroke</li>       <li>fontFamily</li>       <li>fontSize</li>       <li>fontWeight</li>       <li>fontVariant</li>      </ul> </li>    </ul>    <h3><strong>注意事项</strong></h3>    <ul>     <li>2.0 后我们推荐使用我们绘图库的原生属性（比如：fontSize），不建议使用旧的svg规范的熟悉（比图：'font-size'）。详情见 <a href="/misc/goto?guid=4959714873122582462" rel="nofollow,noindex">G2-Graphic</a></li>    </ul>    <p> </p>    <p> </p>    <p> </p>    <p>来自：http://www.cnblogs.com/zaohe/p/5853629.html</p>    <p> </p>