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

bzzcjhmw 于 2022-12-03 发布在 jQuery

关注(0)|答案(1)|浏览(99)

过去几天我一直试图将此代码转换为纯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(...);

这可能吗？

jquery

来源：https://stackoverflow.com/questions/74631670/equivalent-of-fn-of-jquery-in-vanilla-js

1条答案

按热度按时间

9avjhtql1#

这里假设您使用的ChartJS版本接受HTMLCanvasElement和其他非jQuery Package 的元素到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 }
);

赞(0）回复(0）举报 2022-12-03

我来回答

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

1条答案

相关问题

热门标签

最新问答