当前位置：首页 > 软件库 > iOS代码库 > 图表(Charting) >

hugo-chart

Hugo 站点 Chart 图表组件

授权协议 GPL

开发语言 HTML/CSS

所属分类 iOS代码库、图表(Charting)

软件类型开源软件

地区国产

投递者琴修为

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

这是一个为 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 >}}

使用案例

自定义Hugo的RSS模板

前言 Hugo在生成网站时会默认为用户生成对应的RSS文件，然而Hugo默认生成的RSS订阅源中包含文章的全部内容。虽然这样能极大程度上得给用户提供便捷，但同时会增加文章被爬虫盗取导致版权问题的风险。因此本文的主要内容是介绍如何自定义Hugo的RSS模板。本文首发于我的个人博客技术公馆(wcc.im)：自定义Hugo的RSS模板目录前言目录 RSS简介 Hugo默认的RSS模板 RSS模

hugo-chart

用法

例子

同类工具

相关阅读

相关文章

相关问答

相关文档