如何在纯CSS中制作折线图

• 

  教程上的最佳CSS和JavaScript图表教程+

  

  乔治·马尔索科斯

  2022年8月31日

什么是折线图？

折线图看起来像心电图；它由通过一条线连接的数据点组成。 

这种图表可以为一年的趋势、价格变化、比较行为等提供有用的信息。 

1从数据开始

对于这个演示，我们假设我们想要要在折线图中可视化描述历年员工人数的以下数据：

2指定页面标记

我们将指定包含两个列表的包装器元素：

• 第一个列表设置y轴范围。如果您查看上面的表数据，您将看到第二列包含最多40个值。记住这一点，我们将定义6个从0到50的值，步长为10。因此，y轴的值将为0、10、20、30、40和50。
• 第二个列表设置x轴数据。这些是从我们表格的第一列中提取的，从最低到最高。还应考虑开始,结束、和延迟传递给列表项的CSS变量。我们将使用它们创建数据点来构建直线。

以下是所需的标记：

1

  <迪夫 类=“海图记录器”>

2

    <ul 类=“图表-y”>

三

      <li>50</li>

4

      <li>40</li>

5

      <li>30</li>

6

      <li>20</li>

7

      <li>10</li>

8

      <li>0</li>

9

    </ul>

10

    <ul 类=“图表-x”>

11

      <李 风格=“--开始：80%；--结束：60%”>

12

        <span>2010</span>

13

      </li>

14

      <李 风格=“--开始：60%；--结束：50%；--延迟：1”>

15

        <span>2013</span>

16

      </li>

17

      <李 风格=“--开始：50%；--结束：70%；--延迟：2”>

18

        <span>2016</span>

19

      </li>

20

      <李 风格=“--开始：70%；--结束：80%；--延迟：3”>

21

        <span>2019</span>

22

      </li>

23

      <李 风格=“--开始：80%；--结束：80%；--delay:4”>

24

        <span>2022</span>

25

      </li>

26

    </ul>

27

  </div>

现在，让我们解释一下这些变量的值：

• 这个开始价值观将描述每年的员工数量。y轴中的最大值为50，这意味着在百分比模式下为100%。因此，对于代表40名员工，我们将使用此计算：（40/50）*100=>80%。同样，对于30名员工，我们将使用以下公式：（30/50）*100=>60%，以此类推。
• 要连接数据点结束除了最后一个之外的所有列表项的值都应与开始下一个同级列表项的值。也就是说结束第一个列表项的值将与开始第二个列表项的值结束第二个列表项的值将与开始第三个列表项的值等。
• 这个延迟值将设置图表动画序列。该值越高，相关动画需要运行的时间越长。

三。设置图表样式

为了简单起见，我们将跳过重置/基本样式。您可以通过单击CSS公司演示项目的选项卡。

图表包装器是一个弹性容器，轴之间有20px的间隙。y轴宽度将自动显示，而x轴将展开以覆盖剩余空间。 

x轴及其项目也将是柔性容器。项目将平均分布在主轴上，其内容将位于底部。

以下是相关样式：

1

.图表记录器 {

2

  显示: 弯曲;

三

  缺口: 20像素;

4

}

5

6

.图表记录器 图表-x {

7

  显示: 弯曲;

8

  柔性拉伸: 1;

9

}

10

11

.图表记录器 图表-x 锂 {

12

  显示: 弯曲;

13

  对齐-项目: 柔性发动机;

14

  弯曲: 1;

15

}

接下来，我们将定义：：之前和：：之后列表项的伪元素。

这个：：之前伪元素将构造线，而：：之后伪元素（可选）将创建数据点。

线条动画

要创建线条动画，就像我们在过去的许多教程中所做的那样，我们将利用剪辑路径财产，特别是其多边形（）CSS函数。

• 

  使用CSS（和一点JavaScript）构建网格到全屏幕的图像动画

  

  乔治·马尔索科斯

  2024年1月30日
• 

  使用CSS Clip-Path属性创建漂亮的滚动动画

  

  乔治·马尔索科斯

  2021年1月18日
• 

  如何在滚动中构建灰度到颜色的效果（CSS和JavaScript）

  

  乔治·马尔索科斯

  2020年5月19日
• 

  如何构建JavaScript页面加载动画

  

  乔治·马尔索科斯

  2023年3月22日
• 

  使用GSAP构建JavaScript页面加载动画

  

  乔治·马尔索科斯

  2021年4月22日

作为提醒，一个具有clip-path：多边形（0 0，100%0，100%100%，0 100%）使它完全显现出来。

在我们的示例中，让我们集中关注具有开始值为80%和结束价值40%。

1

<!--第一个列表项-->

2

<李 风格=“--开始：80%；--结束：60%”>

三

  <span>2010</span>

4

</li>

我首先，我们将设置剪辑路径属性到多边形（020%、020%、0.20%、0.20%）这将使所有点位于同一位置。

当页面加载时，我们将更新剪辑路径值为多边形（0 20%、100%40%、100%计算（40%+2px）、0计算（20%+2pz））这样，最后三个点的位置就会改变，并创建一条线我们可以控制其厚度。

请注意，在Clippy工具中，我们无法添加CSS。这就是为什么我尝试了41%和21%，而不是样式中出现的calc（40%+2px）和calc（20%+2px）。

考虑到所有这些，我们现在可以构建动态样式，而不必考虑图表的数据点。

以下是相关样式：

1

/*此处为自定义变量*/

2

三

.图表包装器 图表-x 锂 {

4

  位置: 相对的;

5

}

6

7

.图表记录器 图表-x 锂：：之前,

8

.图表记录器 图表-x 锂：：之后 {

9

  内容: "";

10

  位置: 绝对的;

11

  左边: 0;

12

  背景: 无功功率，无功功率(--图表颜色);

13

}

14

15

.图表记录器 图表-x 锂：：之前 {

16

  顶部: 0;

17

  宽度: 100%;

18

  高度: 100%;

19

  剪辑路径: 多边形(

20

    0 计算(100% - 无功功率，无功功率(--开始)),

21

    0 计算(100% - 无功功率，无功功率(--启动)),

22

    0 计算(100% - 无功功率，无功功率(--开始)),

23

    0 计算(100% - 无功功率，无功功率(--开始))

24

  );

25

  过渡: 剪辑路径 0.5秒 计算(无功功率，无功功率(--延迟, 0) * 0.5秒);

26

}

27

28

.图表记录器 图表-x 锂：：之后 {

29

  顶部: 计算(100% - 无功功率，无功功率(--开始));

30

  宽度: 10像素;

31

  高度: 10像素;

32

  边界半径: 50%;

33

  转型: 平移Y(-50%);

34

}

35

36

.已加载 .图表记录器 图表-x 锂：：之前 {

37

  剪辑路径: 多边形(

38

    0 计算(100% - 无功功率，无功功率(--开始)),

39

    100% 计算(100% - 无功功率，无功功率(--结束)),

40

    100% 计算(计算(100% - 无功功率，无功功率(--结束)) + 无功功率，无功功率(--海图厚度)),

41

    0 计算(计算(100% - 无功功率，无功功率(--开始)) + 无功功率，无功功率(--图表厚度))

42

  );

43

}

最后，值得注意的是，为了确保图表动画在页面加载时运行，我们将使用JavaScript添加加载类到身体元素。

1

窗口.添加事件侦听器("负载", 功能() {

2

  文件.身体.类列表.添加("加载");

三

})

不要忘记使用浏览器工具测试每个项目的最终clip-path值。

多行图表

有了我们的单线图，我们可以更进一步，用多一点额外的标记创建CSS-only多线图。 

考虑以下演示，它遵循了我们在单线图中讨论的相同原则：

结论

伙计们，我们刚刚完成了另一个CSS图表教程！我希望你喜欢我们开发的演示，并学到了一两个新东西。

当然，您可以使用JavaScript图表库创建更高级的内容。但是，另一方面，通过尝试现代CSS技术，走一条艰难的路总是很有趣的。

一如既往，感谢您的阅读！