如何在Webflow的Chart.js图表中添加类别名称标签？

问题说明 #

我想在Webflow里制作带有Red、Blue、Yellow这类类别名称标签的Chart.js图表，怀疑问题出在Chart.js插件的引入环节，且该需求在在线JS编辑器中也无法运行。想确认仅通过Webflow的嵌入代码容器能不能完成这个需求。

修正后的可运行Chart.js示例代码 #

原示例代码存在语法错误（<style>标签未闭合、JS代码未包裹在<script>标签内），这是导致无法运行的核心原因，以下是修正后的完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
  <style>
    .chartjs-title {
      font-family: Roboto;
    }

    #inputValue {
      width: 200px;
      height: 100px;
      font-size: 20px;
    }

    #inputContainer {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <!-- 图表容器 -->
  <canvas id="myChart" width="400" height="400"></canvas>
  <!-- 输入控件容器 -->
  <div id="inputContainer">
    <input type="number" id="inputValue" placeholder="输入数值">
  </div>

  <script>
    const ctx = document.getElementById('myChart');

    const chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          },
          datalabels: { 
            anchor: 'end',
            align: 'top',
            offset: -6,
            font: {
              family: 'Roboto',
              size: 16
            },
            formatter: function(value, context) {
              return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
            }
          }
        },
        indexAxis: 'y',
        scales: {
          x: {
            ticks: {
              fontFamily: 'Roboto',
              callback: function(value, index, values) {
                return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
              }
            },
            grid: {
              display: false
            }
          },
          y: {
            ticks: {
              fontFamily: 'Roboto',
              anchor: 'end'
            },
            grid: {
              display: false
            }
          }
        }
      }
    });

    const input = document.getElementById('inputValue');
    input.addEventListener('input', () => {
      const inputNum = parseFloat(input.value) || 0;
      chart.data.datasets[0].data = [
        inputNum * 0.8 + 10,
        inputNum * 0.9 + 10,
        inputNum * 2 + 10,
        inputNum * 3 + 10,
        inputNum * 4 + 10,
        inputNum * 10 + 10
      ];
      chart.update();
    });
  </script>
</body>
</html>

在Webflow中的实现步骤 #

1. 添加嵌入组件：在Webflow编辑器的目标位置，添加「Embed」代码容器。
2. 粘贴核心代码：将上述代码中从<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>到最后一个</script>的内容，连同图表容器<canvas id="myChart"></canvas>和输入控件HTML结构一起粘贴到Embed容器中。
3. 适配页面样式：根据Webflow页面的布局，修改CSS样式（比如调整图表尺寸、输入框样式），确保和页面风格统一。
4. 测试功能：发布站点后，验证输入框修改数值时图表数据的更新是否正常。

结论 #

该需求完全可以通过Webflow的嵌入代码容器实现，核心问题是原示例代码的语法错误导致无法运行，修正代码后即可正常工作。

内容的提问来源于stack exchange，提问作者Mateusz828