Chart.js - 漂亮的Javascript圖表開源庫

是一個使用簡單、動效現代酷炫js圖表庫，用來構建專業美觀的數據圖表。

介紹

Chart.js 是一個基于 canvas 的可視化開源庫。它可以用于構建簡單漂亮的 H5 圖表，滿足產品數據可視化的需求。

官網截圖

特點

包含6種不同的常用圖表，每種方式都有酷炫的動畫，以及一大堆的定制選項和交互性擴展；
兼容性好。基于HTML5 canvas ，兼容所有現代瀏覽器，并且支持 IE7/8；
無依賴的超級輕量級產品，gzip后大小僅11.01kb。
智能響應式，如果瀏覽器改變了大小，Chart.js 會重新調整圖表的大小，同時為這個大小提供了完美的縮放粒度；
支持模塊化加載，并且每個圖表類型都已經分離，可以按需加載項目所需的圖表類型；
針對鼠標和觸摸設備上提供了對畫布工具提示的簡單支持，也支持自定義觸發事件，能滿足復雜的交互需求。

官方文檔(英文)

使用體驗

圖表需求在互聯網產品中極其常見，一般的圖表庫能把人給丑哭，開發一個好看的圖表功能，需要投入的精力非常多。Chart.js 就是一款優秀漂亮的圖表解決方案，不僅可以用在pc端中后臺項目上，由于其出色的響應式設計，使得用在移動端上表現尤為亮眼，而且使用簡單、API簡潔，開箱即用的特點，直到現在都是我選擇圖表庫的首選。

雖然 Chart.js 基于HTML5，不僅能用在web、小程序上，也能用混合開發的方式用在App產品中。

遺憾的是，雖然目前 Chart.js 足夠好看，但并不支持樣式定制，樣式也不偏中性，所以對視覺設計要求高的產品需求，如果風格不相近的話，使用起來會有些突兀。

免費使用說明

Chart.js 是開放源代碼，基于MIT許可開源，我們可以免費使用在任何項目。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點【了解更多】查看本次分享的相關網址。

文作者：HelloGitHub-kalifun

圖表庫千萬個今天 HelloGitHub 給大家推薦個很有“特色”的圖表庫：一個手繪風格的 JS 圖表庫 —— Chart.xkcd，快收起你緊繃、嚴肅的面容讓我們一起看看用手繪風格展示數據的效果。

一、介紹

項目地址：https://github.com/timqian/chart.xkcd

Chart.xkcd 是一個圖表庫，可繪制“非精細”、“卡通”或“手繪”樣式的圖表。

效果是不是很可愛？那下面就跟著 HelloGitHub 發起的《講解開源項目》^[1]的教程一起學習、上手使用起來吧！

二、快速入手

使用 Chart.xkcd 很容易，只需頁面中包含庫的引用和一個用于顯示圖表的 <svg> 節點即可。

2.1 代碼示例

先用一段簡短的代碼，讓大家了解下基本的參數和代碼的樣子，后面會有可運行的代碼示例片段供大家學習和使用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!--將 SVG 元素直接嵌入 HTML 頁面中-->
<svg class="line-chart"></svg>
<!--引入 JS 庫-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
 //關鍵代碼塊
 const svg = document.querySelector('.line-chart')
 new chartXkcd.Line(svg, {
 title: '',
 xLabel: '',
 yLabel: '',
 data: {...},
 options: {},
 });
</script>
</body>
</html>

2.2 參數說明

title：圖表的標題
xLabel：圖表的 x 標簽
yLabel：圖表的 y 標簽
data：需要可視化的數據
options：自定義設置

三、圖表類型

Chart.xkcd 支持多樣的圖表類型，下面將逐一講解和實現：折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達圖，實現的示例代碼完整可運行、注釋完整、包含參數說明。

tips：下文中的示例代碼均可直接運行，保存為 html 文件便可在本機查看效果。

3.1 折線圖

折線圖以折線形式顯示一系列數據點，它可以用于顯示趨勢數據或不同數據集的比較。

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!--將 SVG 元素直接嵌入 HTML 頁面中-->
<svg class="line-chart"></svg>
<!--引入 JS 庫-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".line-chart" 的元素。
 const svg = document.querySelector('.line-chart');
 // chartXkcd.Line 創建一個折線圖
 const lineChart = new chartXkcd.Line(svg, {
 //圖表的標題
 title: 'Monthly income of an indie developer',
 // 圖表的 x 標簽
 xLabel: 'Month',
 // 圖表的 y 標簽
 yLabel: '$ Dollors',
 // 需要可視化的數據
 data: {
 // x 軸數據
 labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
 // y 軸數據
 datasets: [{
 // 第一組數據
 label: 'Plan',
 data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
 }, {
 // 第二組數據
 label: 'Reality',
 data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
 }],
 },
 // 可選配置以自定義圖表的外觀
 options: {
 // 自定義要在 y 軸上看到的刻度號（默認為 3）
 yTickCount: 3,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upLeft
 }
 });
</script>
</body>
</html>

參數說明

yTickCount：自定義要在y軸上看到的刻度號（默認為 3）
legendPosition：指定要放置圖例的位置（默認為 chartXkcd.config.positionType.upLeft）。
左上位置：chartXkcd.config.positionType.upLeft
頂右上位置：chartXkcd.config.positionType.upRight
左下位置：chartXkcd.config.positionType.downLeft
右下位置：chartXkcd.config.positionType.downRight
dataColors：不同顏色的數據集數組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認為 false）

效果展示

3.2 XY 圖

XY 圖表用于通過指定點的 XY 坐標來繪制點，您也可以通過連接這些點來繪制 XY 折線圖。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".xy-chart" 的元素。
 const svg = document.querySelector('.xy-chart');
 //chartXkcd.XY 創建一個XY圖
 new chartXkcd.XY(svg, {
 //圖表的標題
 title: 'Pokemon farms',
 // 圖表的 x 標簽
 xLabel: 'Coodinate',
 // 圖表的 y 標簽
 yLabel: 'Count',
 // 需要可視化的數據
 data: {
 datasets: [{
 // 第一組數據
 label: 'Pikachu',
 data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
 }, {
 // 第二組數據
 label: 'Squirtle',
 data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
 }],
 },
 options: {
 // 自定義要在 x 軸上看到的刻度號（默認為 3）
 xTickCount: 5,
 // 自定義要在 y 軸上看到的刻度號（默認為 3）
 yTickCount: 5,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 // 用線連接點（默認 false）
 showLine: false,
 // 指定時間格式
 timeFormat: undefined,
 // 更改點的大小（默認為 1）
 dotSize: 1,
 },
 });
</script>

參數說明

xTickCount：自定義要在x軸上看到的刻度號（默認為 3）
yTickCount：自定義要在y軸上看到的刻度號（默認為 3）
legendPosition：指定要放置圖例的位置
showLine: 點連接成線。
timeFormat：指定時間格式
dotSize：更改點的大小（默認為 1）
dataColors：不同顏色的數據集數組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認為 false）

效果展示

如果你想將這些點連接起來，讓數據對比更加明顯的話。請修改 showLine：true 再刷新頁面你就可以看到連線的效果了。

3.3 條形圖

條形圖提供了一種顯示以豎條表示的數據值的方式。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".bar-chart" 的元素。
 const svg = document.querySelector('.bar-chart');
 // chartXkcd.Bar 創建一個條形圖
 const barChart = new chartXkcd.Bar(svg, {
 // 圖表的標題
 title: 'github stars VS patron number',
 // xLabel: '', // optional
 // yLabel: '', // optional
 // 圖表數據
 data: {
 labels: ['github stars', 'patrons'],
 datasets: [{
 data: [100, 2],
 }],
 },
 options: {
 // 自定義要在 y 軸上看到的刻度號（默認為 3）
 yTickCount: 2,
 },
 });
</script>

參數說明

yTickCount：自定義要在y軸上看到的刻度號（默認為 3）
dataColors：不同顏色的數據集數組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用xkcd效果（默認為 false）

效果展示

3.4 圓餅/甜甜圈圖

餅圖廣泛得應用在各個領域，用于表示不同分類的占比情況，通過弧度大小來對比各種分類。餅圖通過將一個圓餅按照分類的占比劃分成多個區塊，整個圓餅代表數據的總量，每個區塊（圓弧）表示該分類占總體的比例大小，所有區塊（圓弧）的加和等于 100%。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".pie-chart" 的元素。
 const svg = document.querySelector('.pie-chart');
 // chartXkcd.Pie 創建一個圓餅圖
 const pieChart = new chartXkcd.Pie(svg, {
 // 圖表的標題
 title: 'What Tim made of',
 // 需要可視化的數據
 data: {
 labels: ['a', 'b', 'e', 'f', 'g'],
 datasets: [{
 data: [500, 200, 80, 90, 100],
 }],
 },
 options: {
 // 指定空的餅圖半徑
 innerRadius: 0.5,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 },
 });
</script>

參數說明

innerRadius：指定空的餅圖半徑（默認值：0.5）
需要餅圖嗎？將 innerRadius 設置為 0
legendPosition：指定要放置圖例的位置
dataColors：不同顏色的數據集數組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認為 false）

效果展示

3.5 雷達圖

雷達圖（Radar Chart）又被叫做蜘蛛網圖，適用于顯示三個或更多的維度的變量。雷達圖是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數據的方法，其中軸的相對位置和角度通常是無意義的。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".radar-chart" 的元素。
 const svg = document.querySelector('.radar-chart');
 // chartXkcd.Radar 創建一個雷達圖
 const radarChart = new chartXkcd.Radar(svg, {
 // 圖表的標題
 title: 'Letters in random words',
 // 需要可視化的數據
 data: {
 labels: ['c', 'h', 'a', 'r', 't'],
 datasets: [{
 label: 'ccharrrt',
 data: [2, 1, 1, 3, 1],
 }, {
 label: 'chhaart',
 data: [1, 2, 2, 1, 1],
 }],
 },
 options: {
 // 在圖表中顯示圖例
 showLegend: true,
 // 點的大小
 dotSize: 0.8,
 // 在每行附近顯示標簽
 showLabels: true,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 // unxkcdify: true,
 },
 });
</script>

參數說明

showLabels：在每行附近顯示標簽（默認為 false）
ticksCount：自定義要在主行上看到的刻度號（默認為 3）
dotSize：更改點的大小（默認為 1）
showLegend：在圖表附近顯示圖例（默認為 false）
legendPosition：指定要放置圖例的位置
dataColors：不同顏色的數據集數組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認為 false）

效果展示

四、最后

以上就是講解的全部內容，相信教程至此 Chart.xkcd 庫的基本用法你已經基本掌握，后面就可以用來今天學到的東西，提高自己項目的顏值了。

有了 Chart.xkcd 讓數據可愛地展示出來并不難，快動手自己實現一個吧～

參考資料

[1]《講解開源項目》: https://github.com/HelloGitHub-Team/Article

[2]CHART.XKCD 官方文檔: https://timqian.com/chart.xkcd/

[3]CHART.XKCD 項目地址: https://github.com/timqian/chart.xkcd

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系我們、加入我們，讓更多人愛上開源、貢獻開源～

程序開發的朋友希望對你們有所幫助！！

1.JavaScript 圖表庫ECharts [國產]（是一款由百度前端技術部開發的，基于Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。）

2.ECharts - Java類庫ECharts-Java[國產] （一個針對 ECharts 2.0 版本的Java類庫，實現了所有ECharts中的Json結構對應的Java對象，）

3.儀表盤 WebApp 模板AdminLTE（AdminLTE 是受歡迎的開源的管理儀表盤和控制面板的WebApp模板。它是基于Bootstrap 3的CSS框架，反應靈敏的HTML模板。）

4.Web 報表工具 EasyReport [國產] （一個簡單易用的 Web 報表工具。它的主要功能是把 SQL 語句查詢出的行列結構轉換成 HTML 表格(Table)，并支持表格的跨行(RowSpan)與跨列(ColSpan)。同時它還支持報表 Excel 導出、圖表顯示及固定表頭與左邊列的功能。）

5.基于 canvas 的小型圖表庫sChart.js [國產] （使用canvas實現的一個小型簡單的圖表庫，經過服務器gzip壓縮只有2kb，包含柱狀圖、折線圖、餅狀圖和環形圖。不依賴任何js庫，使用方便）

6.React 和 D3 構建的圖表庫Recharts[國產] (一個用 React 和 D3構建的重新定義的圖表庫,簡單地使用 React 組件進行部署,支持原生 SVG，輕量級應用一些 D3 子模塊)

7.純 Javascript 圖表 Highcharts (一個制作圖表的純Javascript類庫，主要特性如下：兼容性：兼容當今所有的瀏覽器，包括iPhone、IE和火狐等等；對個人用戶完全免費；純JS，無BS)

切版 qieban(.cn)

在線咨詢

上一篇：java將html轉為pdf
下一篇：用純javascript實現斗魚直播彈幕效果，代碼也才這么點

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Chart.js - 漂亮的Javascript圖表開源庫

介紹

特點

使用體驗

免費使用說明

您的項目需求