使用Chart.js创建多个图表时如何避免重复代码并动态传值

核心实现思路是将图表渲染逻辑封装为可复用函数，每次调用时传入对应自定义数据与挂载节点即可，无需重复编写渲染逻辑。

1. 封装通用图表渲染函数 #

以常用的Chart.js为例，封装逻辑如下：

// 入参分别为图表挂载DOM节点、自定义图表数据、可选覆盖配置
function renderChart(container, chartData, customConfig = {}) {
  const baseConfig = {
    type: chartData.type || 'bar',
    data: {
      labels: chartData.labels,
      datasets: [{
        label: chartData.datasetName,
        data: chartData.valueList,
        backgroundColor: chartData.themeColor || '#2196F3'
      }]
    },
    options: {
      responsive: true,
      ...customConfig.options
    }
  }
  return new Chart(container, baseConfig)
}

如果你使用的是ECharts、Highcharts等其他图表库，仅需调整函数内的渲染语法即可，整体逻辑完全通用。

2. 定义多组差异化图表数据 #

你可以根据需求任意扩展多组数据，每组数据对应一个独立图表：

const allChartData = [
  {
    type: 'bar',
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasetName: '华东区营收',
    valueList: [1200, 1900, 3000, 2100],
    themeColor: '#FF5722'
  },
  {
    type: 'line',
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasetName: '华北区营收',
    valueList: [800, 1500, 2200, 2800],
    themeColor: '#4CAF50'
  },
  {
    type: 'pie',
    labels: ['数码', '服饰', '食品', '家居'],
    datasetName: '全品类占比',
    valueList: [35, 25, 20, 20],
    themeColor: ['#9C27B0', '#FFC107', '#00BCD4', '#795548']
  }
]

3. 批量渲染多图表 #

提前在页面中准备好对应数量的图表挂载节点（示例统一使用类名chart-container），批量调用渲染函数即可：

const chartContainers = document.querySelectorAll('.chart-container')
// 存储所有图表实例，后续需要更新/销毁时可直接调用
const chartInstances = []

allChartData.forEach((data, index) => {
  if(chartContainers[index]) {
    const instance = renderChart(chartContainers[index], data)
    chartInstances.push(instance)
  }
})

注意事项 #

• 后续需要更新单个图表数据时，直接拿到对应实例调用更新方法即可，示例：chartInstances[0].data = 新数据; chartInstances[0].update()
• 图表的尺寸、交互等配置都可以通过customConfig参数单独为每个图表自定义，不会互相影响

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