这是一个为 Hugo 而写的 Chart.js 图表组件，用 chart 短代码就可以方便的把优雅的动态图表插入到你的Hugo站点中。
用法用 gitsubmoduleaddhttps://github.com/She-Yu/hugo-chart.gitthemes/hugo-chart 命令把hugo-chart添加为项目的子模块。
找到Hugo站点根目录下的配置文件（cofig.yaml 或 cofig.toml），把 hugo-chart 添加到 theme 选项的最左侧，以下是 cofig.yaml
theme:["hugo-chart","my-theme"]以下是 cofig.toml
theme=["hugo-chart","my-theme"]在你的站点文章或页面中，插入以下格式的短代码
{{<chart[宽度][高度]>}}//这里是Chartjs的配置{{</chart>}}名称类型默认描述widthdecimal100%图表宽度，默认是响应式的heightumber300图表高度（px）注意Chartjs默认是响应式的,为了使自定义宽高生效,你需要先把 maitaiAspectRatio 选项设置成 false 。
例子{{<chart100300>}}{type:'bar',data:{labels:['Red','Blue','Yellow','Gree','Purple','Orage'],datasets:[{label:'BarChart',data:[12,19,18,16,13,14],backgroudColor:['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}]},optios:{maitaiAspectRatio:false,scales:{yAxes:[{ticks:{begiAtZero:true}}]}}}{{</chart>}}
评论