用 gitsubmoduleaddhttps://github.com/Shen-Yu/hugo-chart.gitthemes/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>}}名称类型默认描述widthdecimal100%图表宽度，默认是响应式的heightnumber300图表高度（px）注意Chartjs默认是响应式的,为了使自定义宽高生效,你需要先把 maintainAspectRatio 选项设置成 false 。
例子{{<chart100300>}}{type:'bar',data:{labels:['Red','Blue','Yellow','Green','Purple','Orange'],datasets:[{label:'BarChart',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>}}
评论