基于HTML5-Canvas的開源信息圖表繪制組件： Dragon Chart
Dragon Chart 基于HTML5-Canvas的開源信息圖表繪制組件。
整體特點
- 純html5及Javascript，跨平臺，不依賴任何框架；
- 支持多種常用繪圖類型；
- 支持核心代碼內的語言設定(用于錯誤提示)；
- 支持動畫(可關閉)；
- 支持皮膚設定以及自定義定制皮膚功能；
- 支持自定義繪圖；
- 記錄最終繪制的圖形中的各元素位置、大小等信息，以供查詢；
- 支持直接導出圖片(非全部均瀏覽器支持)；
- 可引用包含所有類別圖形的js，也可只引用用于特定類別圖形的js； </ul> </div>
- 最多二級選項，防止過多層級導致用戶使用不便；
- 多級優先級選項設定(如字體顏色，"數據內設定">"選項內設定">"皮膚內設定">"默認值")；
- 支持顏色的漸變及透明(非本插件功能，歸功于瀏覽器，本處僅提示開發者而已)；
- 檢查選項輸入，若用戶輸入的選項不符合規范，則拋出包含錯誤信息的異常； </ul> </div>
- 采用json格式的數據源；
- 軸坐標支持數字、百分比(自動計算)、日期(量級為天)、時間(量級為分鐘)等四種格式；
- 直接在數據中設定圖形中的某些特性(表現優先級高于通過選項設定)；
- 支持純數組數據源，使數據源json結構更加簡單明了； </ul>
選項特點
數據特點
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 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！