基于HTML5-Canvas的开源信息图表绘制组件： Dragon Chart
jopen
10年前
Dragon Chart 基于HTML5-Canvas的开源信息图表绘制组件。
整体特点
- 纯html5及Javascript，跨平台，不依赖任何框架；
- 支持多种常用绘图类型；
- 支持核心代码内的语言设定(用于错误提示)；
- 支持动画(可关闭)；
- 支持皮肤设定以及自定义定制皮肤功能；
- 支持自定义绘图；
- 记录最终绘制的图形中的各元素位置、大小等信息，以供查询；
- 支持直接导出图片(非全部均浏览器支持)；
- 可引用包含所有类别图形的js，也可只引用用于特定类别图形的js；
选项特点
- 最多二级选项，防止过多层级导致用户使用不便；
- 多级优先级选项设定(如字体颜色，"数据内设定">"选项内设定">"皮肤内设定">"默认值")；
- 支持颜色的渐变及透明(非本插件功能，归功于浏览器，本处仅提示开发者而已)；
- 检查选项输入，若用户输入的选项不符合规范，则抛出包含错误信息的异常；
数据特点 
- 采用json格式的数据源；
- 轴坐标支持数字、百分比(自动计算)、日期(量级为天)、时间(量级为分钟)等四种格式；
- 直接在数据中设定图形中的某些特性(表现优先级高于通过选项设定)；
- 支持纯数组数据源，使数据源json结构更加简单明了；
DChart自定义皮肤
饼状图(pie)
各主流浏览器在2012年2月的份额占比
</div> </div> 环状图(ring)
各主流浏览器在2012年2月的份额占比
</div> </div> 多维环状图(multiring)
主流浏览器在不同时间段上的份额(数据是杜撰的)
</div> </div> 极图(polar)
2013年1月编程语言排行榜榜单
</div> </div> 条状图(bar)
某外包公司在2013年一月至十月的销售额
</div> </div> 堆积条状图(heapbar)
堆积条状图形式展示三个IT公司在2013年三月至八月的收入情况
</div> </div> 柱状图(histogram)
柱状图形式展示三个IT公司在2013年三月至八月的收入情况
</div> </div> 堆积柱状图(heaphistogram)
堆积柱状图形式展示三个IT公司在2013年三月至八月的收入情况
</div> </div> 线状图(line)
两个网站在一天中的流量占比(以点击率计算)
</div> </div> 点状图(points)
不同城市在某时间点上的温度情况
</div> </div> 面积图(area)
不同城市在某时间点上的温度情况
</div> </div> 雷达图(radar)
本人给海贼王中娜美和乔巴在不同能力上的评分
</div> </div> 范围条状图(RangeBar)
五个不同国家在2012年及2013年的允许捕鱼期
</div> </div> 范围柱状图图(RangeHistogram)
五个不同国家在2012年及2013年的允许捕鱼期
</div> </div> 嵌套饼状图(NestedPie)
主流浏览器的份额以及每个浏览器不同版本的份额
</div> </div> 范围面积图(RangeArea)
在一天中北京与上海的最高最低气温变化
</div> </div> 队列条状图(QueueBar)
女生和男生在不同成绩阶段的人数分布对比
</div> </div> 队列柱状图(QueueHistogram)
女生和男生在不同成绩阶段的人数分布对比
</div> </div> </div> </div> </div>