Angular Google Charts - 概述



Google Charts 是一個純基於 JavaScript 的圖表庫,旨在透過新增互動式圖表功能來增強 Web 應用程式。它支援各種圖表。圖表使用 SVG 在 Chrome、Firefox、Safari、Internet Explorer (IE) 等標準瀏覽器中繪製。在舊版 IE 6 中,使用 VML 繪製圖形。

angular-google-charts 是一個基於 Angular 的開源 Google Charts 包裝器,用於在 Angular 應用程式中提供優雅且功能豐富的 Google Charts 視覺化效果,並且可以與 Angular 元件無縫地一起使用。各章節討論了 Google Charts 的所有基本元件,並在 Angular 應用程式中提供了相應的示例。

特性

以下是 Google Charts 庫的主要特性。

  • 相容性 - 在所有主流瀏覽器和移動平臺(如 Android 和 iOS)上都能無縫執行。

  • 多點觸控支援 - 支援基於觸屏的平臺(如 Android 和 iOS)上的多點觸控。非常適合 iPhone/iPad 和基於 Android 的智慧手機/平板電腦。

  • 免費使用 - 開源且可免費用於非商業用途。

  • 輕量級 - loader.js 核心庫是一個極其輕量級的庫。

  • 簡單的配置 - 使用 JSON 定義各種圖表的配置,非常易於學習和使用。

  • 動態 - 允許在圖表生成後修改圖表。

  • 多個軸 - 不限於 x、y 軸。支援圖表上的多個軸。

  • 可配置的工具提示 - 當用戶將滑鼠懸停在圖表上的任何點時,都會出現工具提示。googlecharts 提供內建格式化程式或回撥格式化程式以程式設計方式控制工具提示。

  • 日期時間支援 - 特殊處理日期時間。提供大量內建控制元件來控制基於日期的類別。

  • 列印 - 使用網頁列印圖表。

  • 外部資料 - 支援從伺服器動態載入資料。使用回撥函式控制資料。

  • 文字旋轉 - 支援沿任意方向旋轉標籤。

支援的圖表型別

Google Charts 庫提供以下型別的圖表

序號 圖表型別/描述
1

折線圖

用於繪製線/樣條圖。

2

面積圖

用於繪製面積圖。

3

餅圖

用於繪製餅圖。

4

桑基圖、散點圖、階梯面積圖、表格、時間軸、樹狀圖、趨勢線

用於繪製散點圖。

5

氣泡圖

用於繪製基於氣泡的圖表。

6

動態圖表

用於繪製動態圖表,使用者可以在其中修改圖表。

7

組合圖

用於繪製各種圖表的組合。

8

3D 圖表

用於繪製 3D 圖表。

9

Angular 儀表盤

用於繪製速度計型別圖表。

10

熱力圖

用於繪製熱力圖。

11

樹狀圖

用於繪製樹狀圖。

在接下來的章節中,我們將詳細討論上述每種型別的圖表並提供示例。

許可證

Google Charts 是開源的,可免費使用。請訪問以下連結 - 服務條款

廣告