hugo-chartHugo 站点 Chart 图表组件-技术圈

hugo-chartHugo 站点 Chart 图表组件

联合创作 · 2023-09-27 06:58

这是一个为 Hugo 而写的 Chart.js 图表组件，用 chart 短代码就可以方便的把优雅的动态图表插入到你的 Hugo 站点中。

用法

用 git submodule add https://github.com/Shen-Yu/hugo-chart.git themes/hugo-chart 命令把 hugo-chart 添加为项目的子模块。

找到 Hugo 站点根目录下的配置文件（config.yaml 或 config.toml），把 hugo-chart 添加到 theme 选项的最左侧，以下是 config.yaml
```
theme: ["hugo-chart", "my-theme"]
```
以下是 config.toml
```
theme = ["hugo-chart", "my-theme"]
```

在你的站点文章或页面中，插入以下格式的短代码



{{< chart [宽度] [高度] >}}

// 这里是 Chartjs 的配置

{{< /chart >}}

名称	类型	默认	描述
width	decimal	100%	图表宽度，默认是响应式的
height	number	300	图表高度（px）

注意 Chartjs 默认是响应式的, 为了使自定义宽高生效, 你需要先把 maintainAspectRatio 选项设置成 false 。

例子



{{< chart 100 300 >}}

{

    type: 'bar',

    data: {

        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

        datasets: [{

            label: 'Bar Chart',

            data: [12, 19, 18, 16, 13, 14],

            backgroundColor: [

                'rgba(255, 99, 132, 0.2)',

                'rgba(54, 162, 235, 0.2)',

                'rgba(255, 206, 86, 0.2)',

                'rgba(75, 192, 192, 0.2)',

                'rgba(153, 102, 255, 0.2)',

                'rgba(255, 159, 64, 0.2)'

            ],

            borderColor: [

                'rgba(255, 99, 132, 1)',

                'rgba(54, 162, 235, 1)',

                'rgba(255, 206, 86, 1)',

                'rgba(75, 192, 192, 1)',

                'rgba(153, 102, 255, 1)',

                'rgba(255, 159, 64, 1)'

            ],

            borderWidth: 1

        }]

    },

    options: {

        maintainAspectRatio: false,

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero: true

                }

            }]

        }

    }

}

{{< /chart >}}

编辑分享