在 Hexo 中插入 Chart 动态图表

文章来源：作者: Shen-Yu 链接: https://shen-yu.gitee.io/2020/chartjs/ 来源: 岛著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Chartjs 简介

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

Hexo 中的 Chartjs

为了方便在 Hexo 中使用这么漂亮的图表库，我自己写了一个 Hexo 的 Chartjs 插件。插件的安装和使用非常的简单，只需要进入博客目录，然后打开命令行，用 npm 安装一下：

1	npm install hexo-tag-chart --save

之后在文章内使用 chart 的 tag 就可以了

1
2
3

{% chart 90% 300 %}
\\TODO option goes here
{% endchart %}

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

图表示例

现在你已经基本学会了在 Hexo 中插入 Chart 图表了，下面再展示一些基本的图表，更多炫酷的图表可以自己去尝试一下。

柱状图、条形图

{% chart 90% 300 %}
{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.5)', 'rgba(255, 159, 64, 0.5)', 'rgba(255, 205, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(153, 102, 255, 0.5)', 'rgba(201, 203, 207, 0.5)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}
{% endchart %}

显示效果如下所示：

折线图

{% chart 90% 300 %}
{
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: '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 %}

显示效果如下所示：

环形图、饼状图

{% chart 90% 300 %}
{
  type: 'pie',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: 'First Dataset',
      data: [300, 50, 100],
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)']
    }]
  }
}
{% endchart %}

显示效果如下所示：

雷达图

{% chart 90% 300 %}
{
  type: 'radar',
  data: {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [{
      label: 'First Dataset',
      data: [65, 59, 90, 81, 56, 55, 40],
      fill: true,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      pointBackgroundColor: 'rgb(255, 99, 132)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(255, 99, 132)'
    }, {
      label: 'Second Dataset',
      data: [28, 48, 40, 19, 96, 27, 100],
      fill: true,
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgb(54, 162, 235)',
      pointBackgroundColor: 'rgb(54, 162, 235)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(54, 162, 235)'
    }]
  },
  options: {
    elements: {
      line: {
        tension: 0,
        borderWidth: 3
      }
    }
  }
}
{% endchart %}

显示效果如下所示：

气泡图

{% chart 90% 300 %}
{
  type: 'bubble',
  data: {
    datasets: [{
      label: 'First Dataset',
      data: [{
        x: 20,
        y: 30,
        r: 6
      }, {
        x: 25,
        y: 20,
        r: 8
      }, {
        x: 32,
        y: 6,
        r: 7
      }, {
        x: 35,
        y: 26,
        r: 9
      }, {
        x: 40,
        y: 10,
        r: 5
      }],
      backgroundColor: 'rgb(255, 99, 132)'
    }]
  }
}
{% endchart %}

显示效果如下所示：

散点图

{% chart 90% 300 %}
{
  type: 'scatter',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'First dataset',
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgb(255, 99, 132)',
      data: [{
        x: 12,
        y: 45,
      }, {
        x: 12,
        y: 13,
      }, {
        x: 56,
        y: 3,
      }, {
        x: 5,
        y: 87,
      }, {
        x: 43,
        y: 76,
      }, {
        x: 34,
        y: 8,
      }, {
        x: 9,
        y: 53,
      }]
    }, {
      label: 'Second dataset',
      borderColor: 'rgb(54, 162, 235)',
      backgroundColor: 'rgb(54, 162, 235)',
      data: [{
        x: 56,
        y: 12,
      }, {
        x: 7,
        y: 12,
      }, {
        x: 87,
        y: 24,
      }, {
        x: 34,
        y: 45,
      }, {
        x: 65,
        y: 27,
      }, {
        x: 8,
        y: 37,
      }, {
        x: 24,
        y: 89,
      }]
    }],
    options: {
      title: {
        display: true,
        text: 'Chart.js Scatter Chart'
      },
    }
  }
}
{% endchart %}

显示效果如下所示：

混合图

{% chart 90% 300 %}
{
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'Bar Dataset',
      data: [10, 20, 30, 40],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132)'
    }, {
      label: 'Line Dataset',
      data: [20, 30, 40, 50],
      type: 'line',
      fill: false,
      borderColor: 'rgb(54, 162, 235)'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}
{% endchart %}