javascript
extjs chart无法在panel中显示_手绘风格的 JS 图表库：Chart.xkcd
本文作者：HelloGitHub-kalifun
圖表庫千萬個今天 HelloGitHub 給大家推薦個很有“特色”的圖表庫：一個手繪風格的 JS 圖表庫 —— Chart.xkcd，快收起你緊繃、嚴肅的面容讓我們一起看看用手繪風格展示數據的效果。
一、介紹
項目地址：https://github.com/timqian/chart.xkcdChart.xkcd 是一個圖表庫，可繪制“非精細”、“卡通”或“手繪”樣式的圖表。
效果是不是很可愛？那下面就跟著 HelloGitHub 發起的《講解開源項目》的教程一起學習、上手使用起來吧！
二、快速入手
使用 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 讓數據可愛地展示出來并不難，快動手自己實現一個吧～
五、參考資料
CHART.XKCD 官方文檔
CHART.XKCD 項目地址
『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系我們、加入我們，讓更多人愛上開源、貢獻開源～
總結
以上是生活随笔為你收集整理的extjs chart无法在panel中显示_手绘风格的 JS 图表库：Chart.xkcd的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hadoop3.0新特性介绍
- 下一篇： 土地利用转移矩阵图怎么做_肺癌骨转移有哪