圖表簡介JS 2.0

>本文是我們的現代JavaScript >同行。 感謝所有SitePoint的同行評審！ 數據繁多的網站需要有效的數據可視化。 原始數字對於人類很難掌握。圖表和圖形也提供直觀，可訪問的替代方案，即使對於非英語揚聲器也是如此。 清晰的視覺效果增強了理解和網站吸引力。

>本教程介紹了javaScript圖表庫Chart.js。 通過六個示例，我們將演示其使用和配置。 >

Chart.js 2.0的關鍵功能：

>

>多種圖表創建的多功能和用戶友好的JavaScript庫。

簡單的安裝和快速學習曲線。

支持各種圖表：線，條，雷達，極性區域，餡餅和甜甜圈。 圖表類型很容易通過>屬性更改。

增強功能：移動響應能力和集成的標題。
• >
>可自定義的交互性（例如，通過傳奇點擊切換數據集）。
外觀的廣泛自定義選項（顏色，工具提示，動畫）。 >
• type
為什麼要繪製圖表？
• Chart.js與功能強大的自定義平衡。 它避免了更複雜的庫的陡峭學習曲線，同時提供了足夠的靈活性。 它的八種圖表類型涵蓋了大多數可視化需求。 積極的開源社區可確保高質量的維護。 2.0版推出了大量的語法改進和移動支持。 本教程使用Chart.JS 2.0。 包括1.0至2.0轉換的部分。
>
• 安裝圖表：

Chart.js優先考慮簡單性。 最簡單的安裝方法是通過cdn：

> >您還需要一個

元素：

>另外，請使用軟件包管理器（有關詳細信息，請參見“入門指南”）。 >讓我們探索Chart.js的功能。

線圖：

<🎜>

此最小線圖演示了圖表。 <canvas></canvas>

<canvas id="myChart"></canvas>

請參見Codepen示例

>說明：

：獲取

>的2D渲染上下文。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

：創建圖表對象。 指定圖表類型； 保存圖表數據。 數組索引確定圖形位置。

> PRO提示：

單擊傳說切換數據集。這適用於所有圖表類型。

• ctx條形圖：<canvas></canvas>

在上一個示例中，只需將type: 'line'更改為type: 'bar'>

>>

請參見Codepen示例
雷達圖：

type 'radar'更改為。 調整backgroundColor>和borderColor，以通過重疊數據更好地可讀性。

>

請參見Codepen示例

極圖：

更改為。 極性圖表可視化單個數據集。 type 'polarArea'

請參見Codepen示例
pie和甜甜圈圖表：

> 更改為或

>。 甜甜圈圖表使用

來控制孔的大小。 type 'pie''doughnut'參見Codepen示例（pie）cutoutPercentage

請參見Codepen示例（甜甜圈）

> Chart.js configuration（）：

屬性允許廣泛的自定義： options

標題：

>使用options>。

添加標題
• ：控制甜甜圈圖的孔尺寸（0-50）。 options: { title: { display: true, text: 'My Chart' } }
• >堆疊的條形圖：使用cutoutPercentage用於堆疊的條形。
• 事件處理：options: { scales: { yAxes: [{ stacked: true }] } }
自定義傳奇單擊行為：

>>示例：動態字幕更新：

>

<🎜>

請參閱Codepen示例

此示例根據傳奇單擊更新標題。

Chart.js 2.0 vs. 1.0：> 密鑰差異：

>圖表聲明： 2.0使用

，

和

的單個
調用。 1.0使用函數鏈接。
• > 移動支持：new Chart() 2.0包括本機移動支持。 type> data options集成的標題： 2.0提供內置標題。
>
• 結論：
• Chart.js是快速圖表原型製作的理想選擇。其多樣化的圖表類型和易用性使其成為任何Web開發人員的寶貴工具。 有關全面的詳細信息，請參閱官方圖表。 （注意：替換
用每個圖表類型的實際編碼鏈路替換。）

以上是圖表簡介JS 2.0的詳細內容。更多資訊請關注PHP中文網其他相關文章！