基于HTML5-Canvas的开源信息图表绘制组件: Dragon Chart
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>
本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!