如何创建辅助函数并向Chart.js传递数据以实现图表功能？

我最近封装了一个辅助函数来处理Chart.js的常见需求，能快速生成折线图，分享一下实现步骤：

1. 先在HTML中添加基础结构 #

在你的index.html文件里插入以下代码，用来承载应用和图表画布：

<div id="app"></div>
<canvas id="myChart" width="400" height="400"></canvas>

2. 创建Chart.js辅助函数 #

接下来写一个可复用的辅助函数，传入标签和数据就能初始化折线图，我把它导出方便在项目其他地方调用：

export const chartUI = (labels, data) => {
  const ctx = document.getElementById("myChart");
  // 避免重复实例化导致的图表重叠问题，先销毁已存在的实例
  if (window.myChartInstance) {
    window.myChartInstance.destroy();
  }
  window.myChartInstance = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'RATES',
        data: data,
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
        fill: true,
        tension: 0.1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
};

小提示： #

• 我特意加了图表实例销毁逻辑，防止多次调用时出现图表重叠的问题
• 补全了一些常用的样式配置，比如背景色、边框色，你可以根据业务需求随意调整
• 调用起来特别简单，举个例子：

// 示例调用
chartUI(['Jan', 'Feb', 'Mar', 'Apr'], [12, 19, 15, 25]);

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