Chartist.js 使用教程

最新推荐文章于 2024-08-10 07:36:00 发布

伏葵飚Anastasia

最新推荐文章于 2024-08-10 07:36:00 发布

阅读量406

点赞数 5

本文链接：https://blog.csdn.net/gitblog_01090/article/details/141077531

版权

Chartist.js 使用教程

chartistSimple responsive charts项目地址:https://gitcode.com/gh_mirrors/ch/chartist

项目介绍

Chartist.js 是一个简单、响应式的图表库，它使用 SVG 技术来创建图表，并且体积小巧（仅 10KB Gzip），没有依赖项。Chartist.js 是由一个社区开发的，这个社区对其他图表库提供的功能感到失望，因此决定自己开发一个更符合他们需求的图表库。Chartist.js 提供了简单易用的 API，并且支持通过 CSS 进行样式定制，使得图表的样式和控制完全分离。

项目快速启动

安装

你可以通过 npm 安装 Chartist.js：

npm install chartist

基本使用

以下是一个简单的例子，展示如何使用 Chartist.js 创建一个折线图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chartist.js 示例</title>
  <link rel="stylesheet" href="node_modules/chartist/dist/chartist.min.css">
</head>
<body>
  <div class="ct-chart"></div>

  <script src="node_modules/chartist/dist/chartist.min.js"></script>
  <script>
    new Chartist.Line('.ct-chart', {
      labels: ['周一', '周二', '周三', '周四', '周五'],
      series: [
        [12, 9, 7, 8, 5]
      ]
    }, {
      fullWidth: true,
      chartPadding: {
        right: 40
      }
    });
  </script>
</body>
</html>