相当于 $.fn。 Vanilla JS 中的 jQuery

Question

最近几天我一直在尝试将这段代码转换为纯 JS，但直到现在都没有运气......

当通过 jQuery 对象调用时，这段代码基本上启动了一个新的 Chart.JS 实例。

(function ($) {
    $.fn.createChartLine = function (labels, datasets, options) {
        var settings = $.extend({}, $.fn.createChartLine.defaults, options);
        this.each(function () {
            
            let ctx = $(this);

            new Chart(ctx, {
                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
                            }
                        }
                    }
                }
            });
        });
    };

    $.fn.createChartLine.defaults = {
        display_legend: true,
        legend_position: 'top',
        legend_pointStyle: true,
        labelString: 'Clicks'
    };
})(jQuery);

使用上面的代码初始化新的图表线：

$("#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});

我尝试了数千种方法来从中删除 jQuery，但没有成功。目的是在某些页面中摆脱 jQuery，但这个脚本是必不可少的，因为有了它我可以在同一页面中创建许多 Chart.JS 实例，而无需重复那么多代码。

我的目标是得到这样的东西：

document.getElementById('chart1').createChartLine(...);

可能吗？

Answer 1

这假设您正在使用 version of ChartJS 接受 HTMLCanvasElement 和其他非 jQuery 包装元素到 new Chart() 构造函数。

您不应该扩展原生元素的原型，而应该创建一个新函数来获取传入的元素。

// Instead of
document.getElementById('chart1').createChartLine(...);

// You'll want
createChartLine(document.getElementById('chart1'), ...);

或类似的东西。

我实际上并没有传递元素，而是传递了一个选择器，因为它最符合 jQuery 插件的工作方式。

function createChartLine(selector, labels, datasets, options = {}) {
  const settings = Object.assign(
    {},
    {
      display_legend: true,
      legend_position: "top",
      legend_pointStyle: true,
      labelString: "Clicks",
    },
    options
  );

  const elements = document.querySelectorAll(selector);
  const charts = [];

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const newChart = new Chart(element, {
      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,
            },
          },
        },
      },
    });

    charts.push(newChart);
  }

  return charts;
}

这是您调用该函数的方式。

createChartLine(
  "#chart1", // This is the new argument, the selector of the element you are initializing
  ["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 }
);