基于HTML5的图形库ichartjs发布在线图表设计器1.1 版本
jopen 11年前
ichartjs designer是在线设计ichartjs图表并可查看源代码的工具。设计器采用所见即所得的设计理念。设计器包含图表主要的配置项,可以满足一般图表的视觉设计工作。适用于ichartjs图表开发以及设计图表文案的科技工作者。
主要特色
- 所见即所得,图表视觉立即呈现。
- 内置绚丽的示例。
- 设计稿本地存储。
- 生成源代码。
支持的图表
- 柱状图
- 条形图
- 饼状图
设计器需要支持HTML5 canvas的浏览器,推荐使用chrome。
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合你。 ichartjs目前支持饼图、折线图、区域图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。
特点
- 跨平台:
ichartjs利用HTML5 canvas完成图形绘制工作,这样它有能力在现代的主流浏览器中运用自如。
无论是PC上的,还是在Android/iOS上,ichartjs都能在不改动任何代码的前提下提供统一的视图。 - 轻量级:ichartjs压缩文件只有90k。如果你只需要单一的图形功能,你也可以只加载你所需要的js文件。 那样代码量会更少。ichartjs不依赖任何其他库。只和浏览器相关。这样给你带来的是一个完全独立的轻量级js组件。
- 多风格:ichartjs提供了多个定义样式方面的配置项。通过它们,可以制作
出由设计师设计出来的图表风格。
图表类型

Hello World
用我们的方式展示了我们熟悉的Hello World。

2D饼状图
该示例展示了2012年2月份市场浏览器占有的情况。

2D柱形图
该示例构造了一个Highcharts风格的图表。

2D环形图
该示例展示了一个合格的工程师需要掌握的技能情况。

3D饼状图
该示例以饼状图2D模式展示了2012年7月份中国浏览器市场占有率Top6。

3D蔟状柱形图
该示例以柱形图3D模式展示了2012年2月份市场浏览器占有的情况。

2D折线图
该示例展示了网站近5天的PV流量情况。

2D面积图
该示例展示了2012一年中每个月份平均温度的情况。

2D条形图
该示例展示了中国社交媒体网站TOP10。

3D堆积柱形图 (new)
该示例展示了全国连锁零售企业总部(总店)数TOP5。

组合图 (new)
该示例展示了某公司2011年度销售5强情况。

组合图 (new)
该示例展示了Pinterest网站访问量的情况。

2D堆积条形图 (new)
该示例展示了近8年美国游戏零售年度分析。

2D堆积柱形图 (new)
该示例展示了2004年至2007年全国限额以上连锁零售业情况。