2. 程式人生 > 實用技巧 >Hexo部落格中插入 Chart 動態圖表

Hexo部落格中插入 Chart 動態圖表

阿新 • • 發佈：2020-08-11

該文基本(全部)來自於chatjs中文文件
由於使用pjax，導致頁面需要二次重新整理才會顯示錶格，故引入了自動重新整理的JS，但這樣會導致回退標籤失效

背景

今天在谷歌上逛部落格時，突然發現shen-yu大佬根據chatjs寫了一個Hexo外掛，出於興趣，打算使用並記錄該外掛的效果。
shen-yu大佬
chatjs中文文件
由於外掛的安裝和圖表的使用上面兩個連結已介紹得足夠詳細，本人只做一些圖表的演示，並充當一個函式，實現程式碼的複用(手動狗頭)。

圖表

折線圖

效果

示例用法

{% chart 90% 300 %}  //其中 chart 是標籤名，endchart 是結束標籤，不需要更改，可以通過設定 options 裡面的 
              aspectRatio 屬性來調整圖表的寬高比例，預設 width 為 100%，height 為 300px。
 {
    type: 'line',
    data: { //  折線圖資料
    labels: ['8.4', '8.5', '8.6', '8.7', '8.8', '8.9', '8.10'], //  橫座標
    datasets: [{ //  縱座標變數名稱
        label: 'My First dataset',
		lineTension: 0,
        borderColor: 'rgb(255, 99, 132)', //  線條顏色
        data: [0, 10, 5, 2, 20, 30, 45] //  縱座標
        }]
    },
    options: {
        responsive: true,
        title: {
        display: true,
        text: 'Chart.js 折線圖' //  圖表名稱
        }
    }
}
{% endchart %}

相關屬性

名稱 型別 描述
backgroundColor Color/Color[] 線條背景色
borderColor Color/Color[] 線條顏色
borderWidth Number/Number[] 線的寬度(以畫素為單位)
borderDash Number[] 破折號的長度和間距。 參考 MDN
borderDashOffset Number 偏移量 參考 MDN
borderCapStyle String 線帽樣式 參考 MDN
borderJoinStyle String 線連線風格 參考 MDN
cubicInterpolationMode
 String 離散的點之間的連線方式
fill Boolean/String 折線區域的填充方式
label String 在圖例和工具提示中顯示的資料集的標籤。
lineTension Number 貝塞爾曲線張力。設定為 0 繪製直線。如果使用單調立方插值，則忽略此選項。
pointBackgroundColor Color/Color[] 點的填充色
pointBorderColor Color/Color[] 點的邊框色
pointBorderWidth Number/Number[] 點邊框寬度(以畫素為單位)
pointRadius Number/Number[]
 點的半徑。如果設定為 0，則不顯示。
pointStyle String/String[]/Image/Image[] 資料點的樣式
pointHitRadius Number/Number[] 對滑鼠事件作出響應的非顯示點的畫素大小。
pointHoverBackgroundColor Color/Color[] 滑鼠懸浮時點背景顏色。
pointHoverBorderColor Color/Color[] 滑鼠懸浮時點的邊框色
pointHoverBorderWidth Number/Number[] 滑鼠懸浮時點的邊框寬度
pointHoverRadius Number/Number[] 滑鼠懸浮時點的半徑大小
showLine Boolean 如果設定 false，則不會為此資料集繪製線條。
spanGaps Boolean 如果為 true，則會在沒有或為空資料的點之間繪製線條。如果為 false，則帶有 NaN 資料的點會產生一箇中斷
steppedLine Boolean/String 是否顯示為階梯線
xAxisID String 繪製此資料集的 x 軸的 ID。如果未指定，則預設為第一個找到的 x 軸的 ID。
yAxisID String 繪製該資料集的 y 軸的 ID。如果未指定，則預設為第一個找到的 y 軸的 ID。

柱狀圖

效果·垂直柱狀圖

示例用法·垂直柱狀圖

{% chart 90% 300 %}
{
    "type":"bar",
    "data":{
        "labels":["January","February","March","April","May","June","July"],
        "datasets":[{
        "label":"My First Dataset",
        "data":[65,59,80,81,56,55,40],
        "fill":false,
        "backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],
        "borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],
        "borderWidth":1
                     }]
            },
    "options":{
        "scales":{
            "yAxes":[{
                "ticks":{
                    "beginAtZero":true
                        }
                    }]
               }
            }
}
{% endchart %}

效果·水平柱狀圖

示例用法·水平柱狀圖

{% chart 90% 300 %}
{
    "type":"horizontalBar", //  水平柱狀圖
    "data":{
        "labels":["January","February","March","April","May","June","July"],
        "datasets":[{
            "label":"My First Dataset",
            "data":[65,59,80,81,56,55,40],
            "fill":false,
            "backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],
            "borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],
            "borderWidth":1
        }]
    },
            "options":{
                "scales":{
                    "xAxes":[{
                        "ticks":{
                            "beginAtZero":true
                        }
                    }]
                }
            }
}
{% endchart %}

相關屬性

名稱 型別 描述
label String 在圖例和工具提示中顯示的資料集標籤
xAxisID String 繪製此資料集的 x 軸的 ID。如果未指定，則預設為第一個找到的 x 軸的 ID 。
yAxisID String 繪製該資料集的 y 軸的 ID。如果未指定，則預設為第一個找到的 y 軸的 ID。
backgroundColor Color/Color[] 柱狀/條形圖填充色。
borderColor Color/Color[] 邊框色
borderWidth Number/Number[] 邊框寬度(以畫素為單位)
borderSkipped String 不繪製邊框
hoverBackgroundColor Color/Color[] 懸浮時的填充色
hoverBorderColor Color/Color[] 懸浮時的邊框色
hoverBorderWidth Number/Number[] 懸浮時邊框寬度

雷達圖

效果

示例用法

{% chart 90% 300 %}
{
    "type":"radar",
    "data":{
        "labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],
        "datasets":[
            {
            "label":"My First Dataset",
            "data":[65,59,90,81,56,55,40],
            "fill":true,
            "backgroundColor":"rgba(255, 99, 132, 0.2)",
            "borderColor":"rgb(255, 99, 132)",
            "pointBackgroundColor":"rgb(255, 99, 132)",
            "pointBorderColor":"#fff",
            "pointHoverBackgroundColor":"#fff",
            "pointHoverBorderColor":"rgb(255, 99, 132)"
        },
            {
                "label":"My Second Dataset",
                "data":[28,48,40,19,96,27,100],
                "fill":true,
                "backgroundColor":"rgba(54, 162, 235, 0.2)",
                "borderColor":"rgb(54, 162, 235)",
                "pointBackgroundColor":"rgb(54, 162, 235)",
                "pointBorderColor":"#fff",
                "pointHoverBackgroundColor":"#fff",
                "pointHoverBorderColor":"rgb(54, 162, 235)"
            }
        ]
    },
                "options":{
                    "elements":{
                        "line":{
                            "tension":0,
                            "borderWidth":3
                        }
                    }
                }
}
{% endchart %}

相關屬性

名稱 型別 描述
label String 圖例和工具提示中的資料集的標籤名
backgroundColor Color/Color[] 填充色
borderColor Color/Color[] 線的顏色
borderWidth Number/Number[] 線寬度(以畫素為單位)
borderDash Number[] 破折號的長度和間距 參考 MDN
borderDashOffset Number 偏移量 參考 MDN
borderCapStyle String 線冒樣式 參考 MDN
borderJoinStyle String Line joint 樣式 參考 MDN
fill Boolean/String 區域填充色
lineTension Number 貝塞爾曲線張力。0 為直線。
pointBackgroundColor Color/Color[] 資料點填充色
pointBorderColor Color/Color[] 資料點邊框色
pointBorderWidth Number/Number[] 資料點邊框寬度(以畫素為單位)
pointRadius Number/Number[] 資料點半徑。0 為不顯示點
pointStyle String/String[]/Image/Image[] 資料點樣式
pointHitRadius Number/Number[] 對滑鼠事件作出響應的非顯示點的畫素大小。
pointHoverBackgroundColor Color/Color[] 滑鼠懸浮時，資料點背景顏色
pointHoverBorderColor Color/Color[] 滑鼠懸浮時，資料點邊框色
pointHoverBorderWidth Number/Number[] 滑鼠懸浮時資料點的邊框寬度
pointHoverRadius Number/Number[] 滑鼠懸停時，資料點的半徑大小

環狀/餅狀圖

效果·環狀圖

示例用法·環狀圖

{% chart 90% 300 %}
{
    "type":"doughnut",
    "data":{
        "labels":["Red","Blue","Yellow"],
        "datasets":[
            {
                "label":"My First Dataset",
                "data":[300,50,100],
                "backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]
            }
        ]
    }
}
{% endchart %}

效果·餅狀圖

示例用法·餅狀圖

{% chart 90% 300 %}
{
    "type":"pie",
    "data":{
        "labels":["Red","Blue","Yellow"],
        "datasets":[
            {
                "label":"My First Dataset",
                "data":[300,50,100],
                "backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]
            }
        ]
    }
}
{% endchart %}

相關屬性

名稱 型別 描述
label String 圖例和提示中顯示的標籤名
backgroundColor Color[] 資料集中每個資料區域的填充色
borderColor Color[] 邊框色
borderWidth Number[] 邊框寬度
hoverBackgroundColor Color[] 滑鼠懸浮時的填充色
hoverBorderColor Color[] 滑鼠懸浮時邊框色
hoverBorderWidth Number[] 滑鼠懸浮時邊框寬度
名稱 型別 預設值 描述
cutoutPercentage Number 50 - for doughnut, 0 - for pie 從中間切出的圖表的百分比。
rotation Number -0.5 * Math.PI 起始角度
circumference Number 2 * Math.PI 允許圖形覆蓋
animation.animateRotate Boolean true 如果為 true，則圖表將使用旋轉動畫進行動畫。該屬性在options.animation物件中。
animation.animateScale Boolean false 如果為 true，則將動畫從中心向外縮放圖表。

極地圖

效果

示例用法

{% chart 90% 300 %}
{
    "type":"polarArea",
    "data":{
        "labels":["Red","Green","Yellow","Grey","Blue"],
        "datasets":[
            {
                "label":"My First Dataset",
                "data":[11,16,7,3,14],
                "backgroundColor":["rgb(255, 99, 132)","rgb(75, 192, 192)","rgb(255, 205, 86)","rgb(201, 203, 207)","rgb(54, 162, 235)"]
            }
        ]
    }
}
{% endchart %}

相關屬性

名稱 型別 描述
label String 在圖例和工具提示中要顯示資料集的標籤
backgroundColor Color[] 填充色
borderColor Color[] 邊框色
borderWidth Number[] 邊框寬度
hoverBackgroundColor Color[] 滑鼠懸浮時背景色
hoverBorderColor Color[] 滑鼠懸浮時邊框色
hoverBorderWidth Number[] 滑鼠懸浮時邊框寬度

氣泡圖

效果

示例用法

{% chart 90% 300 %}
{
    "type":"bubble",
    "data":{
        "datasets":[
            {
                "label":"First Dataset",
                "data":[
                    {"x":20,"y":30,"r":15},{"x":40,"y":10,"r":10},{"x":24,"y":20,"r":10},{"x":28,"y":16,"r":15},{"x":36,"y":12,"r":10}
                ],
                    "backgroundColor":"rgb(255, 99, 132)"
            }
        ]
    }
}
{% endchart %}

相關屬性

名稱 型別 可指令碼化 可索引 預設值
backgroundColor Color Yes Yes 'rgba(0,0,0,0.1)'
borderColor Color Yes Yes 'rgba(0,0,0,0.1)'
borderWidth Number Yes Yes 3
data Object[] - - required
hoverBackgroundColor Color Yes Yes undefined
hoverBorderColor Color Yes Yes undefined
hoverBorderWidth Number Yes Yes 1
hoverRadius Number Yes Yes 4
hitRadius Number Yes Yes 1
label String - - undefined
pointStyle String Yes Yes circle
radius Number Yes Yes 3

每個氣泡的風格可以通過以下屬性進行控制：

名稱 描述
backgroundColor 七寶背景色
borderColor 氣泡邊框色
borderWidth 氣泡邊框寬度 (以畫素為單位)
pointStyle 氣泡形狀樣式
radius 氣泡半徑（以畫素為單位）

散點圖

效果

示例用法

{% chart 90% 300 %}
{
    type:'scatter',
    data:{
        labels:['January','February','March','April','May','June','July'],
        datasets:[
            {
                label:'My First dataset',
                borderColor:'rgb(255, 99, 132)',
                backgroundColor:'rgb(255, 99, 132)',
                data:[
                    {x:12,y:45,},{x:12,y:13,},{x:56,y:3,},{x:5,y:87,},{x:43,y:76,},{x:34,y:8,},{x:9,y:53,}
                ]
                },
            {
                label:'My Second dataset',
                borderColor:'rgb(54, 162, 235)',
                backgroundColor:'rgb(54, 162, 235)',
                data:[
                    {x:56,y:12,},{x:7,y:12,},{x:87,y:24,},{x:34,y:45,},{x:65,y:27,},{x:8,y:37,},{x:24,y:89,}
                ]
            }
        ],
        options:{
            title:{
                display:true,
                text:'Chart.js Scatter Chart'
            },
        }
    }
}
{% endchart %}

相關屬性

名稱 型別 描述
borderColor Color/Color[] 點顏色
borderWidth Number/Number[] 線的寬度(以畫素為單位)
borderDash Number[] 破折號的長度和間距。 參考 MDN
borderDashOffset Number 偏移量 參考 MDN
borderCapStyle String 線帽樣式 參考 MDN
borderJoinStyle String 線連線風格 參考 MDN
cubicInterpolationMode String 離散的點之間的連線方式
fill Boolean/String 折線區域的填充方式
label String 在圖例和工具提示中顯示的資料集的標籤。
lineTension Number 貝塞爾曲線張力。設定為 0 繪製直線。如果使用單調立方插值，則忽略此選項。
pointBackgroundColor Color/Color[] 點的填充色
pointBorderColor Color/Color[] 點的邊框色
pointBorderWidth Number/Number[] 點邊框寬度(以畫素為單位)
pointRadius Number/Number[] 點的半徑。如果設定為 0，則不顯示。
pointStyle String/String[]/Image/Image[] 資料點的樣式
pointHitRadius Number/Number[] 對滑鼠事件作出響應的非顯示點的畫素大小。
pointHoverBackgroundColor Color/Color[] 滑鼠懸浮時點背景顏色。
pointHoverBorderColor Color/Color[] 滑鼠懸浮時點的邊框色
pointHoverBorderWidth Number/Number[] 滑鼠懸浮時點的邊框寬度
pointHoverRadius Number/Number[] 滑鼠懸浮時點的半徑大小
showLine Boolean 如果設定 false，則不會為此資料集繪製線條。
spanGaps Boolean 如果為 true，則會在沒有或為空資料的點之間繪製線條。如果為 false，則帶有 NaN 資料的點會產生一箇中斷
steppedLine Boolean/String 是否顯示為階梯線
xAxisID String 繪製此資料集的 x 軸的 ID。如果未指定，則預設為第一個找到的 x 軸的 ID。
yAxisID String 繪製該資料集的 y 軸的 ID。如果未指定，則預設為第一個找到的 y 軸的 ID。

區域圖

效果

示例用法

{% chart 90% 300 %}
{                
    "type":"line",
    "data":{
        "datasets":[
            {
                "label":"Area Dataset",
                "data":[10,40],
                "fill":1, //  填充--->區域圖
                "borderColor":"rgb(54, 162, 235)",
                "backgroundColor":"rgba(255, 99, 132, 0.2)",
                "fill":"origin"
            },
        ]
    }
}
{% endchart %}

相關屬性

模式 型別 值
絕對資料集索引 1 Number 1, 2, 3, ...
相對資料集索引 1 String '-1', '-2', '+1', ...
邊界 2 String 'start', 'end', 'origin'
禁用 3 Boolean false

混合圖表

效果

示例用法

{% chart 90% 300 %}
{
    "type":"bar",
    "data":{
        "labels":["January","February","March","April"],
        "datasets":[
            {
                "label":"Bar Dataset",
                "data":[10,20,30,40],
                "borderColor":"rgb(255, 99, 132)",
                "backgroundColor":"rgba(255, 99, 132, 0.2)"
            },
            {
                "label":"Line Dataset",
                "data":[10,20,30,40],
                "type":"line",
                "fill":false,
                "borderColor":"rgb(54, 162, 235)",
            },
            {
                "label":"Line Dataset2",
                "data":[0,30,10,40],
                "type":"line",
                "fill":false,
                "borderColor":"rgb(255, 0, 0)",
            }
        ]
    },
    "options":{
        "scales":{
            "yAxes":[
                {
                    "ticks":{
                        "beginAtZero":true
                    }
                }
            ]
        }
    }
}
{% endchart %}

相關屬性

注意運用的Chart各自的屬性即可。

申明

文章基本轉自
shen-yu大佬{% btn 'https://shen-yu.gitee.io/2020/chartjs/',shen-yu,far fa-hand-point-right,green larger %}
chatjs中文文件{% btn 'https://chartjs.bootcss.com/docs/getting-started/installation.html',chatjs,far fa-hand-point-right,blue larger %}，並非原創，本人只是進行了總結和排版。

相關推薦

Hexo部落格中插入 Chart 動態圖表

該文基本(全部)來自於chatjs中文文件 由於使用pjax，導致頁面需要二次重新整理才會顯示錶格，故引入了自動重新整理的JS，但這樣會導致回退標籤失效

hexo部落格如何插入圖片

Hexo是一個靜態的部落格網站生成器，生成一個部落格只需要分分鐘的時間就能搞定。

通過Git將Hexo部落格部署到伺服器

本文首發於我的個人部落格 orxing.top 歡迎來訪 伺服器是用的阿里雲ECS CentOS，本來是用來部署WordPress的，後來接觸了Hexo，就把Hexo直接部署到了GitHub pages和Coding Pages上，但是最近發現Coding pages經常抽風

利用Serverless應用搭建Hexo部落格

本文將介紹如何使用火爆的Serverless應用，15分鐘快速搭建Hexo部落格。以騰訊雲提供的Serverless應用–雲開發為例：

什麼是Hexo部落格

Hexo 是一個基於nodejs 的靜態部落格網站生成器，作者是來自臺灣的Tommy Chen。 特點：

Hexo部落格美化之Buftterfly主題魔改

  Hexo是輕量級的極客部落格，因為它簡便，輕巧，擴充套件性強，搭建部署方便深受廣大人們的喜愛。各種琳琅滿路的Hexo主題也是被各種大佬開發出來，十分欽佩，向大佬仰望，大聲稱讚：流批！！！

cnblogs美化——在部落格文章插入“可執行"js程式碼

1.新增css,js檔案 操作:管理-設定-頁首Html程式碼中插入以下程式碼 <link href=\"http://files.cnblogs.com/rubylouvre/mystyle3.css\" rel=\"stylesheet\" type=\"text/css\">

搭建gitee-hexo部落格方法

環境要求 系統 軟體 windows git, node.js(推薦使用cnpm) 安裝Nodejs windows下載二進位制包連結: https://nodejs.org/dist/v10.16.3/node-v10.16.3-win-x64.zip

部落格園背景頁面動態特效

1.設定動畫首先要申請許可權 1.1首先進入[我的部落格園]，進入[管理]中的[設定]

Hexo部落格遷移

Hexo使用者指南 - 部落格遷移 GitHub+Hexo搭建部落格的過程比較平滑，但是它的配置卻非常耗時，一旦電腦出現問題或者需要在另外一臺電腦上寫部落格，那麼Hexo部落格的遷移非常就讓人頭疼。下面參考其他部落格的方法，

部落格園頁尾動態背景程式碼

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title>

部落格中新增音樂播放器外掛

效果圖 這裡可以用自己下載下來的歌，歌曲數目不是固定的 步驟： 1：申請開通js許可權2：上傳歌曲和封面　　歌曲封面上傳：

Hexo部落格加入聊天系統DaoVoice

關於 DaoVoice DaoVoice 是一款革命性的應用運營平臺，致力於幫助企業實現以使用者為中心的「精益運營」體系。

美化部落格中的程式碼片段

正文 正常ide複製過來的程式碼是這個樣子的，不算醜，但也不算好看 final Node<K,V>[] resize() {

部落格中css樣式的正確設定

一、簡介 部落格園的文章是支援html程式碼和css樣式的，即使是markdown寫作。當某個標籤需要特製樣式時，我們可以自定義樣式來覆蓋掉原本的樣式。

部落格園新增滑鼠動態線條

說明：本人剛建立部落格不久，看到其他博主的部落格上有這麼一個炫酷的 滑鼠效果，搗鼓了一下，也整了一個

如何在PPT中插入Pyecharts的圖表？

如何在PPT中插入Pyecharts的圖表？ 1.首先需要PPT2003以上的版本，並帶有開發工具，能夠新增web browser控制元件

記錄hexo部落格搭建

編寫時間2018-12-07 23:05:00 某天心血來潮想搭建一個部落格... 於是花了大概四五個小時，主要時間用於查閱各種bug的解決教程。

hexo部落格本地搜尋失效，一直轉圈

技術標籤：javajsonpythonspringxml 關於 Hexo 的 Local Search 失效的問題 問題描述: 你會發現一開始你的Blog搜尋功能還是正常的，搜尋出結果一直在轉圈圈等待，或者 搜尋功能能搜尋但是不能跳轉過去，隨著添

使用 rsync-deploy-action 同步 Hexo 部落格到個人伺服器

前幾天寫了個基於 rsync 進行檔案同步的 Action -> rsync-deploy-action。目的有三個：