hugo-chart 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
hugo-chart 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 GPL
开发语言 HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 iOS代码库图表(Charting)
开发厂商
地区 国产
提 交 者 Eric沈
适用人群 未知
收录时间 2020-09-29

软件简介

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

用法

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

  2. 找到 Hugo 站点根目录下的配置文件(config.yaml 或 config.toml),把 hugo-chart 添加到 theme 选项的最左侧,以下是 config.yaml

    theme: ["hugo-chart", "my-theme"]

    以下是 config.toml

    theme = ["hugo-chart", "my-theme"]
  3. 在你的站点文章或页面中,插入以下格式的短代码

    {{< chart [宽度] [高度] >}}
    // 这里是 Chartjs 的配置
    {{< /chart >}}
    名称 类型 默认 描述
    width decimal 100% 图表宽度,默认是响应式的
    height number 300 图表高度(px)
  4. 注意 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 >}}

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2018/05/24 23:03

hugo小玩

hugo小玩 1. 安装 install from source by brew install pre-built-binary 2. 下载源码 $ go get github.com/magefile/mage $ go get -d github.com/gohugoio/hugo $ cd ${GOPATH:-$HOME/go}/src/github.com/gohugoio/hugo $ mage vendor $ mage install 疑难点: 依赖 该项目依赖了贼多的外部库 可以使用 https://www....

0
0
发表了博客
2019/11/29 17:20

[golang][hugo]使用Hugo搭建静态站点

使用Hugo搭建静态站点 hugo下载地址:https://github.com/gohugoio/hugo 模板列表:https://github.com/gohugoio/hugoThemes 开始搭建 1、下载和初始化 安装包 wget https://github.com/gohugoio/hugo/releases/download/v0.60.0/hugo_0.60.0_Linux-64bit.tar.gz tar -zxvf hugo_0.60.0_Linux-64bit.tar.gz chmod +x h...

0
1
发表于大前端专区
2017/11/05 17:38

hugo使用备忘录

最近在github上发现了除了hexo外的另一个静态网页神器:hugo,这里就简单记录下使用的一些记录。 这里抄一下hugo官方文档的介绍。 **Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署**。 [官方文档地址](http://www.gohugo.org/) 这里多说几句Go语言。该语言貌似最近挺火热,很多人看好的一门新...

0
0
发表了博客
04/23 13:04

Hugo博客搭建

HUGO + Github + Github Action持续集成部署个人博客 HUGO本地环境 首先在HUGO的官网下载Hugo的Windows安装包,然后将路径添加到环境变量即可。 step1:下载hugo step2:配置环境变量 HUGO站点配置及主题配置 创建站点 在目录下直接输入下面的代码即可创建一个名为blog的hugo站点(注意:新建的站点是没有自带主题的) hugo ...

0
0
发表了博客
04/23 17:40

Hugo博客搭建

HUGO + Github + Github Action持续集成部署个人博客 HUGO本地环境 首先在HUGO的官网下载Hugo的Windows安装包,然后将路径添加到环境变量即可。 step1:下载hugo step2:配置环境变量 HUGO站点配置及主题配置 创建站点 在目录下直接输入下面的代码即可创建一个名为blog的hugo站点(注意:新建的站点是没有自带主题的) hugo ...

0
0
发表于大前端专区
06/23 10:05

Hugo 建站经验之谈

首发于 Nebula Graph 官方博客:https://nebula-graph.com.cn/posts/why-static-site-generator-hugo/ 前言 建站工具,早已不是一个新颖的话题,抛开可视化建站单论开发层面,各类语言都有推出广受欢迎的建站框架...

0
5
发表于运维专区
2018/08/29 20:39

Hugo部署历程

Hugo部署历程 网站:链接 文章已迁移:链接 情景描述 使用 WordPress 写博客有一个学期了,博客没写几篇,Nginx 和 WordPress 倒是折腾了不少。也是嘛,如果不是折腾了一个学期的 Nginx,这次学校网络更新架构,要...

0
0
发表了博客
2018/04/06 20:12

Hugo快速搭建Blog

半小时内搭建好,简单,快速。

1
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部