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

hexo-tag-chart

在 Hexo 站点中插入 Chartjs 动态图表
授权协议 MIT
开发语言 JavaScript
所属分类 iOS代码库、 图表(Charting)
软件类型 开源软件
地区 国产
投 递 者 通安宁
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Chartjs 是一款简单优雅的数据可视化工具,对比其他图表库,如 echarts 、 highcharts 、 c3 、 flot 、 amchart 等,它的画面效果、动态效果都更精致,它的 文档首页 就透出一股小清新,基于 HTML5 Canvas,它拥有更好的性能且响应式,基本满足了一般数据展示的需要,包括折线图,条形图,饼图,散点图,雷达图,极地图,甜甜圈图等。

安装

$ npm install hexo-tag-chart --save

用法

{% chart [width] [height] %}
\\ 这里填写 Chartjs 配置
{% endchart %}
Name Type Default Description
width decimal 100% 图表宽度 (%)
height number 300 图表高度 (px)

其中 chart 是标签名,endchart 是结束标签,不需要更改,90% 是图表容器的相对宽度,默认是 100%,300 是图表容器的高度,默认是按正常比例缩放的,你可以通过设置 options 里面的 aspectRatio 属性来调整宽高比例,另外还有许多属性可以自定义,你可以查看 官方文档。在标签之间的部分,都是需要自己填充的图表数据和属性。

例子

{% chart 80% 300 %}
{
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js Line Chart'
        }
    }
};
{% endchart %}

效果

更多用法介绍,请参考 这里

最后宣传一波自己的主题~

hexo-theme-ayer 、点击预览

 

  • 其实我的网站添加深色模式已经很久了,上次看到群里有小伙伴问我怎么做的,就决定写下来帮助一些想要添加的群友。我的博客链接 简述原理 简要说一下原理利用js给全局HTML的body标签增加一个class为DarkMode的属性控制开启深色模式,再通过这个全局属性值重新写一个深色模式需要用到的CSS就可以实现点击深色模式按钮进行切换。 深色模式颜色的选择 如果在深色模式中简单的使用黑底白字会因为两者过高

  • 本文主要是Hexo Ocean主题博客搭建过程的记录 博客地址:松林羊 hexo 的基本命令 hexo init [folder] :创建一个存放网站源码的文件夹。 hexo new [layout] <title>:新建一篇文章。layout:默认post,可以是page、draft。title:文章标题,标题包含空格的话,请使用引号括起来。 hexo clean:清除缓存文件db.json和已

  • Hexo引入Mermaid流程图和MathJax数学公式 近来用Markdown写文章,越来越不喜欢插入图片了,一切能用语法解决的问题坚决不放图,原因有二: 如果把流程图和数学公式都以图片方式放到文章内,当部署到Github上后,访问博客时图片加载实在太慢,有时一篇文章需要画10来个流程图,那你就得截图10来多次,还得给这些图片想一个合适的名字,同时插入图片的时候还要注意图片的插入位置和顺序; 如

  • 异常内容 FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html Template render error: (unknown path) [Line 1, Column 12] unknown block tag: aplayer

  • hexo 需要安装 软件 Node.js hexo 安装指令 通过yarn或者npm安装,推荐使用yarn,下载速度比npm稳定而且快太多了 npm install hexo-cli --save yarn add hexo-cli --save 让hexo变得更好用 hexo插件 同样通过npm或者yarn下载安装即可,当然要有选择性地安装,不然插件太多时,也会占据和产生大量资源的。 "de

 相关资料
  • Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen 特点: 不可思议的快速 ─ 只要一眨眼静态文件即生成完成 支持 Markdown 仅需一道指令即可部署到 GitHub Pages 和 Heroku 已移植 Octopress 插件 高扩展性、自订性 兼容于 Windows, Mac & Linux

  • hexo-douban —— 一个在 Hexo 页面中嵌入豆瓣个人主页的小插件。 安装 $ npm install hexo-douban --save 设置 将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件). douban:  user: mythsman  book:    title: 'This is my book title'    quote: 'Th

  • Hexo Boot 是基于 Spring Boot + MySQL 开发的一套开源的博客系统。前身是 ml-blog 博客系统,在此基础上演变和扩展而来。 扩展功能 除了继承 ml-blog 中的功能(文章、分类、标签、全局参数)外,Hexo Boot 还扩展了以下功能 评论、留言功能 友链功能 主题功能 黑名单功能 附件功能 备份功能

  • Hexo是一款使用node.js开发的静态网站构建工具,便于构建华丽绚烂的页面。

  • 评论 hexo默认集成了disqus,但是在天朝明显多说更受欢迎一点。 首先到多说官网去注册一个账号。然后点击进入添加站点页面,填写所有信息。注意,多说域名的前缀就是站点的短网址,下面要用到,这里假设为short_name。 在_config.yml中添加多说的配置: duoshuo_shortname: short_name 修改themes<theme_name>layout_partial

  • sitemap & rss 切换到blog根目录下,输入: $ npm install hexo-generator-feed $ npm install hexo-generator-sitemap 之后重启博客,访问/atom.xml和/sitemap.xml,会发现已经生成了。可以把sitemap提交到搜索引擎的站长平台来增加收录。 部署 首先按照前面教程(一)的gitcafe部分建立好代