Javascript-charts

amCharts 4：圖表

一種新的高級數(shù)據(jù)可視化終于來了！

數(shù)據(jù)可視化的首選庫。當(dāng)您沒有時(shí)間學(xué)習(xí)新技術(shù)時(shí)。當(dāng)您需要一個(gè)簡單而強(qiáng)大且靈活的插入式數(shù)據(jù)可視化解決方案時(shí)。包括所有基本和高級圖表類型，并可通過其他插件（如 Maps 和 TimeLine）進(jìn)行擴(kuò)展。

 

 

 

單個(gè)包中的多種圖表類型選擇

使用 amCharts 4 很容易——所有圖表類型，包括地理地圖，都在一個(gè)易于理解的產(chǎn)品中！

無需弄清楚產(chǎn)品線 - 只需獲取 amCharts 4 即可。

由于它旨在與 React、Angular、Vue、Ember 等現(xiàn)代 Web 開發(fā)工具包一起使用，因此它開箱即用。

• X/Y

線、平滑線、面積、柱/3D 柱、條/3D 柱、曲線柱、圓柱、圓錐、散點(diǎn)圖、氣泡、燭臺、OHLC、階梯（包括無立管）、浮動(dòng)、瀑布、錯(cuò)誤、堆疊（常規(guī)、100% 或 3D）、熱圖、甘特圖以及這些的任意組合。

• 切片

餡餅、3D 餡餅、甜甜圈、嵌套甜甜圈、森伯斯特、漏斗、金字塔、畫報(bào)。

• 地理地圖

地圖圖表、地理熱圖、地圖結(jié)合圖表。（地圖是一個(gè)附加組件，需要單獨(dú)的許可證）

• 其他

?；鶊D、樹狀圖、弦圖、雷達(dá)、極地。

 

先進(jìn)的圖表包

經(jīng)典與一些新的曲折

 

XY 圖表現(xiàn)在非常強(qiáng)大和靈活，您可以在其上繪制任何數(shù)據(jù)。支持所有方向的數(shù)字、日期、持續(xù)時(shí)間或類別軸。

軸現(xiàn)在可以包含交互式中斷，在懸停時(shí)擴(kuò)展并且實(shí)際上看起來很棒。

餅圖現(xiàn)在完全可嵌套，支持自定義開始和結(jié)束角度，以創(chuàng)建半圓。

 

新的地理地圖

 

地圖現(xiàn)在使用 GeoJSON 格式！作為開放且被廣泛接受的標(biāo)準(zhǔn)，它為現(xiàn)成和自定義地圖開辟了許多可能性和來源。

此外，地圖現(xiàn)在非常靈活，支持多系列，可配置到螺母和螺栓。

（地圖是 amCharts 4 的附加組件，需要單獨(dú)的許可證）

 

畫報(bào)

 

創(chuàng)建多層、多系列的圖表。任何 SVG 路徑都可以用作圖表的形狀。

桑基圖

 

令人驚嘆的流程圖，水平和垂直。具有可拖動(dòng)、完全可配置的節(jié)點(diǎn)。

 

增強(qiáng)型雷達(dá)圖

 

 

通過堆疊列、波段、軸和其他顯著增強(qiáng)功能，雷達(dá)圖現(xiàn)在變得更加有用。

 

樹狀圖

 

完全可縮放、多層次、高度可配置。

 

熱圖

 

自動(dòng)構(gòu)建熱圖，使用自定義軸、顏色范圍和令人敬畏的全新交互式熱圖圖例。

使用顏色或點(diǎn)大小或兩者創(chuàng)建熱圖。

通用且靈活的熱規(guī)則允許將數(shù)據(jù)中的任何值附加到任何元素的任何屬性或?qū)傩浴?/span>

 

和弦圖

 

在整潔的圓形和弦圖中可視化您的 2 向關(guān)系數(shù)據(jù)。

內(nèi)置節(jié)點(diǎn)切換功能允許用戶專注于重要的關(guān)系。

 

真正的漏斗圖

 

amCharts 4 帶來了真正的漏斗圖。

Slice 的面積大小代表數(shù)值，所以每一步對整體體積減少的影響比基本漏斗更顯著。

梯形形式也可以配置為進(jìn)一步強(qiáng)調(diào)減少。

使用其他視覺元素完成它，例如完全可配置的切片線、多系列支持、可切換的圖例以及更多選項(xiàng)。

 

靈活性

任何東西都可以是任何東西

 

嵌套圖表元素。將多個(gè)基本或高級形狀包含到其他元素中。

想要在列中添加另一個(gè)圖表？沒問題。

添加三個(gè) SVG 圖像和一個(gè)標(biāo)簽作為線條系列的項(xiàng)目符號？當(dāng)然，為什么不呢。

 

一切都可以配置

 

許多配置選項(xiàng)允許創(chuàng)造性的使用，接近新的圖表類型。

角度、顏色、位置、半徑，任何東西都可以設(shè)置為完全按照您需要的方式彎曲經(jīng)典和新圖表類型。

 

元素狀態(tài)

 

輕松更改元素在不同情況下的外觀，例如在某些交互、懸停、單擊或與數(shù)據(jù)相關(guān)（例如，如果值下降，則列外觀）。

引擎將根據(jù)需要自動(dòng)應(yīng)用所需的屬性，在舊值和新值之間平滑地進(jìn)行動(dòng)畫處理。

通過 API 創(chuàng)建和應(yīng)用自定義狀態(tài)。

多類型多軸支持

 

添加任意數(shù)量的任意類型的軸。

創(chuàng)建不同時(shí)間尺度的重疊比較。

使用維度值的任意組合：數(shù)字、日期、類別或持續(xù)時(shí)間。

 

適配器

 

新的“適配器”功能允許插入自定義代碼以動(dòng)態(tài)覆蓋幾乎任何設(shè)置、屬性或數(shù)據(jù)。

 

文本格式

 

所有文本標(biāo)簽——工具提示、軸標(biāo)簽、標(biāo)題等——現(xiàn)在都支持富文本格式選項(xiàng)，例如更改顏色、字體粗細(xì)或應(yīng)用 CSS 庫中的任何樣式選項(xiàng)。

感覺更勇敢了？現(xiàn)在，任何標(biāo)簽都可以接受完整的 HTML，包括 CSS、圖像以及您可以在瀏覽器中拋出的任何內(nèi)容。

除了格式支持之外，標(biāo)簽現(xiàn)在可以包含實(shí)際數(shù)據(jù)的內(nèi)嵌占位符，并能夠?qū)⒆远x格式應(yīng)用于值。

 

 

性能和數(shù)據(jù)管理

線程數(shù)據(jù)解析和渲染

由于我們的增量數(shù)據(jù)解析/圖表渲染系統(tǒng)，即使有數(shù)千個(gè)數(shù)據(jù)點(diǎn)需要處理，圖表也不會使您的瀏覽器陷入困境。

在構(gòu)建圖表時(shí)，整個(gè)頁面將保持響應(yīng)。

 

針對性能優(yōu)化的 SVG

只要有可能，元素總是被重用和重新散列。除非絕對必要，否則不會重繪任何元素。

即使圖表上有很多復(fù)雜的元素，這也會帶來出色的表現(xiàn)。

 

增量數(shù)據(jù)更新

實(shí)施實(shí)時(shí)圖表，而無需進(jìn)行昂貴的整個(gè)數(shù)據(jù)集重新計(jì)算的開銷。圖表支持增量數(shù)據(jù)更新，使得動(dòng)態(tài)操作數(shù)據(jù)變得非常容易。

內(nèi)置支持外部數(shù)據(jù)源，包括重復(fù)加載和增量數(shù)據(jù)。

 

視覺震撼

煥然一新的樣子

 

默認(rèn)外觀設(shè)計(jì)為看起來很新鮮，就像明天的東西。

精心挑選的配色方案和默認(rèn)設(shè)置是專門選擇的，以使圖表脫穎而出。

 

流暢的動(dòng)畫

 

每個(gè)屬性——顏色、位置、大小、不透明度等等——都是可動(dòng)畫的，以確保平滑過渡。

沒有斷斷續(xù)續(xù)的步進(jìn)動(dòng)畫——一切都是流暢的，包括系列和其他項(xiàng)目的縮放和切換。

內(nèi)置變形機(jī)制來變形和改變形狀。

 

多主題支持

 

主題允許將定制的迷人粒度應(yīng)用于圖表。

此外，每個(gè)圖表可以應(yīng)用多個(gè)主題，這允許組合來自多個(gè)來源的通用功能，即材質(zhì)顏色 + 動(dòng)畫主題。

 

專注于顏色

 

amCharts 4 有一種特殊的方式來處理顏色。借助內(nèi)置功能，可以輕松創(chuàng)建和設(shè)置顏色和透明度。

自動(dòng)生成補(bǔ)色也很容易。例如，圖表將自動(dòng)選擇在工具提示的彩色背景中突出的對比色。

內(nèi)置的顏色集功能提供了根據(jù)許多可配置參數(shù)自動(dòng)生成對比色的方法。只需設(shè)置一些起始顏色，然后觀察圖表自動(dòng)生成顏色托盤。

 

漸變和模式管理

 

創(chuàng)建多色自定義徑向或線性漸變填充非常容易。

使用引人注目的默認(rèn)設(shè)置或提供您自己的步驟、顏色、方向和其他任何內(nèi)容，以獲得獨(dú)特的外觀和感覺。

如果漸變不是你的菜，任何圖像都可以用來為任何元素創(chuàng)建圖案填充。

 

內(nèi)置SVG過濾器

 

amCharts 4 附帶了一個(gè)完全可配置的過濾器列表，您可以使用一行代碼將其應(yīng)用于任何元素。

想讓您的專欄投下陰影嗎？只需將“投影”過濾器添加到您的列系列模板。

此外，過濾器也可以應(yīng)用于狀態(tài)。圖表將在兩個(gè)設(shè)置之間自動(dòng)設(shè)置動(dòng)畫。

捆綁的濾鏡包括：陰影、去飽和、模糊、著色、聚焦、變亮。

 

 

可訪問性和交互性

無障礙

 

• 深思熟慮并內(nèi)置到核心中。
• 預(yù)設(shè)、智能、有用的屏幕閱讀器文本。
• 完全鍵盤控制。
• 捆綁的強(qiáng)烈對比主題。

 

互動(dòng)性

 

• 多指針接口。
• 流體，基于慣性的阻力。
• 內(nèi)置輕柔懸停、觸摸和交互效果。

 

觸控支持

 

• 針對觸摸設(shè)備進(jìn)行了優(yōu)化。
• 不僅在移動(dòng)設(shè)備上進(jìn)行了設(shè)計(jì)和測試，而且還在具有觸摸功能的計(jì)算機(jī)上進(jìn)行了設(shè)計(jì)和測試。
• 在混合設(shè)備上功能齊全。
• 全方位的手勢支持，如雙指縮放、滑動(dòng)等。
• 多點(diǎn)拖動(dòng)。

 

引擎蓋下

使用 TypeScript 構(gòu)建

 

在 TypeScript 應(yīng)用程序中支持強(qiáng)類型和錯(cuò)誤檢查。

在主要 IDE 中享受代碼完成、錯(cuò)誤檢查和動(dòng)態(tài)幫助彈出窗口。

完全支持 TypeScript 和 ES6 模塊。

 

JavaScript 100%

 

可以在任何 vanilla JavaScript 應(yīng)用程序中完全使用。

amCharts 4 不使用或依賴全局變量、外部框架或第 3 方庫。

支持雙重配置：基于對象或通過序列化 JSON。

 

通用SVG引擎

 

可用于構(gòu)建動(dòng)態(tài)、交互式 SVG 界面和應(yīng)用程序。

將各種元素添加到屏幕上，使它們具有交互性，只需幾行代碼。使用內(nèi)置的交互功能使它們可拖動(dòng)、可調(diào)整大小、可旋轉(zhuǎn)、可滑動(dòng)。

通用 SVG 布局引擎將根據(jù)設(shè)置的規(guī)則放置、調(diào)整大小和排列元素。

鼠標(biāo)、觸摸和鍵盤事件可以附加到 DOM 樹中的任何對象。