如何将jQuery版Chart.js折线图插件转为原生JS实现？

你要的document.getElementById('chart1').createChartLine(...)调用方式完全可以实现，核心思路是扩展HTMLElement和NodeList的原型，模拟jQuery插件的批量处理、默认参数合并功能。

1. 原生JS完整实现代码 #

// 实现类似jQuery.extend的对象合并函数（浅拷贝）
function extend(target, ...sources) {
  sources.forEach(source => {
    if (source && typeof source === 'object') {
      Object.keys(source).forEach(key => {
        target[key] = source[key];
      });
    }
  });
  return target;
}

// 给单个DOM元素添加createChartLine方法
HTMLElement.prototype.createChartLine = function(labels, datasets, options) {
  // 合并默认配置与用户传入的配置
  const settings = extend({}, HTMLElement.prototype.createChartLine.defaults, options);
  
  // 初始化当前元素的折线图
  new Chart(this, {
    type: 'line',
    data: {
      labels: labels,
      datasets: datasets
    },
    options: {
      scales: {
        y: {
          title: {
            display: true,
            text: settings.labelString
          },
          beginAtZero: true
        }
      },
      plugins: {
        legend: {
          display: settings.display_legend,
          position: settings.legend_position,
          labels: {
            usePointStyle: settings.legend_pointStyle
          }
        }
      }
    }
  });
  
  // 返回自身，支持链式调用（可选）
  return this;
};

// 给NodeList添加批量处理的createChartLine方法（模拟jQuery的each）
NodeList.prototype.createChartLine = function(labels, datasets, options) {
  this.forEach(element => {
    element.createChartLine(labels, datasets, options);
  });
  return this;
};

// 设置默认配置，和原jQuery插件保持一致
HTMLElement.prototype.createChartLine.defaults = {
  display_legend: true,
  legend_position: 'top',
  legend_pointStyle: true,
  labelString: 'Clicks'
};

2. 调用示例 #

单个图表初始化（和你想要的调用方式完全一致）

document.getElementById('chart1').createChartLine(['1', '2', '3'], [{
  label: 'Clicks',
  backgroundColor: Chart.helpers.color('#007bff').alpha(0.75).rgbString(),
  borderColor: '#007bff',
  data: [34, 56, 28],
  borderWidth: 2,
  tension: 0.4
}], {display_legend: false});

批量初始化多个图表

// 给所有class为chart的元素创建折线图
document.querySelectorAll('.chart').createChartLine(['1', '2', '3'], [{
  label: 'Clicks',
  backgroundColor: Chart.helpers.color('#007bff').alpha(0.75).rgbString(),
  borderColor: '#007bff',
  data: [34, 56, 28],
  borderWidth: 2,
  tension: 0.4
}]);

关键细节说明 #

• 实现了extend函数替代jQuery的$.extend，用于合并默认配置和用户配置
• 同时给HTMLElement（单个DOM元素）和NodeList（多个DOM元素集合）添加了方法，兼顾单个和批量初始化场景
• 直接使用DOM元素作为Chart.js的上下文（new Chart(this, ...)），无需jQuery包装
• 默认配置和原插件完全一致，保证功能兼容性

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