本教程擴展了上圖。JS課程,其中涵蓋了行和條形圖。在這裡,我們將探索雷達和極地區域圖表,並提供簡潔的概述,然後提供詳細的解釋。
了解雷達圖
線條和條形圖在比較眾多數據點(例如,亞洲國家的人口)的一個或兩個屬性方面表現出色。但是,當比較僅幾個數據點的許多屬性(例如,三個液體的屬性)時,雷達圖表更加有效。它也稱為蜘蛛圖,它有效地可視化並比較了多個變量。
如Wikipedia所定義的那樣,雷達圖以圖形方式代表使用源自中心點的軸的多元數據。軸的角度和相對位置通常不顯著。
讓我們構建我們的第一個雷達圖表。我們通過將“ r”設置為“ x”或“ angle”鍵內的比例鍵來實現這一目標。同樣,通過將“ Animatortate”設置為“動畫”對像中的“ false”來完成禁用旋轉動畫。
以下代碼增強了圖表的視覺吸引力:
var chartoptions = { 插件:{ 標題: { 顯示:是的, 位置:“底部”, 文字:“不同季節的候鳥” },, 傳奇: { 對齊:“中心”, 位置:“左”, 標籤:{ 字體:{ 尺寸:16 } } } },, 動畫片: { 動畫:false },, 秤:{ R:{ tick:{ 字體:{ 尺寸:16 },, 顏色:“白色”, 背景:“黑色” } } },, 元素:{ 弧:{ 角度:180, 邊界彩色:“黑色” } } };
除了動畫控制之外,我們還重新定位了左側的傳說,從而提高了圖表的可讀性。
結論
該教程展示了雷達和極性區域圖表的實際應用,以及如何使用Chart.js的配置選項創建和自定義它們。未來的教程將涵蓋PIE,DONUT和BUBBLE圖表。有關進一步的JavaScript資源和框架,請探索Envato市場。
以上是JS:雷達和極地圖表的開始的詳細內容。更多資訊請關注PHP中文網其他相關文章!