尝试重新初始化 JS 库函数，但失败并出现错误

Question

我正在使用 this JS 生成 github 活动图表。我可以成功加载它，但我正在努力寻找一种在第一次初始化后更新数据的方法：

var processedData = [];

$(document).ready(function () {
});


$('#activityMap').github_graph({
    data: processedData,
    texts: ['activity', 'activities']
});

结果如下图：

然后我调用 get_activity() 从我的数据库加载新活动：

function get_activity() {
    $.ajax({
        url: "?handler=LoadActivity",
        success: function (data) {
            var activities = JSON.parse(data).activities;
            //updated activity
            processedData = processActivitiesData(activities);
            //I tried reinitializing here:
            $('#activityMap').github_graph({
                data: processedData,
                texts: ['activity', 'activities']
            });`
        },
        error: function (error) {

        }
    });
}

但是重新初始化不起作用并导致：

Uncaught TypeError: $(...).github_graph is not a function

参考库的结构，我只能猜测它不能作为普通函数调用并重新初始化。而是需要在JS顶层调用，并且不能嵌套。如何更新库的初始化以支持此操作，以便我可以异步调用我的新活动？

参考库JS：

/**
 * Jquery plugin to render like contribution graph on Github.
 *
 * @see       {@link https://github.com/bachvtuan/Github-Contribution-Graph}
 * @author    [email protected]
 * @license   MIT License
 * @since     0.1.0
 */

//Format string
if (!String.prototype.formatString) {
  String.prototype.formatString = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
      return typeof args[number] != "undefined" ? args[number] : match;
    });
  };
}

(function ($) {
  $.fn.github_graph = function (options) {
    //If the number less than 10, add Zero before it
    var prettyNumber = function (number) {
      return number < 10
        ? "0" + number.toString()
        : (number = number.toString());
    };

    /*
        Count the number on each day and store the object
        */
    var processListTimeStamp = function (list_timestamp) {
      //The result will store into this varriable
      obj_timestamp = {};
      for (var i = 0; i < list_timestamp.length; i++) {
        var _type = typeof list_timestamp[i];
        var _d =
          _type == "number"
            ? new Date(list_timestamp[i])
            : new Date(list_timestamp[i].timestamp);

        var display_date = getDisplayDate(_d);
        var increase = _type == "number" ? 1 : list_timestamp[i].count;
        if (!obj_timestamp[display_date]) {
          obj_timestamp[display_date] = increase;
        } else {
          obj_timestamp[display_date] += increase;
        }
      }
    };

    var getDisplayDate = function (date_obj) {
      var pretty_month = prettyNumber(date_obj.getMonth() + 1);
      var pretty_date = prettyNumber(date_obj.getDate());
      return "{0}-{1}-{2}".formatString(
        date_obj.getFullYear(),
        pretty_month,
        pretty_date,
      );
    };

    var getCount = function (display_date) {
      if (obj_timestamp[display_date]) {
        return obj_timestamp[display_date];
      }
      return 0;
    };

    var getColor = function (count) {
      if (typeof settings.colors[0] == "string") {
        return count > settings.colors.length - 1
          ? settings.colors[settings.colors.length - 1]
          : settings.colors[count];
      }

      const isLargeNumber = (element) => element.count > count;
      i = settings.colors.findIndex(isLargeNumber);
      return i == -1
        ? settings.colors[settings.colors.length - 1].color
        : settings.colors[i - 1].color;
    };

    var start = function () {
      processListTimeStamp(settings.data);
      var wrap_chart = _this;

      settings.colors_length = settings.colors.length;
      var radius = settings.border.radius;
      var hoverColor = settings.border.hover_color;
      var clickCallback = settings.click;

      var start_date;
      if (settings.start_date == null) {
        // if set null, will get from 365 days from now
        start_date = new Date();
        start_date.setMonth(start_date.getMonth() - 12);
        start_date.setDate(start_date.getDate() + 1);
      } else {
        // formats:
        // - YYYY-MM-DD
        // - YYYY/MM/DD
        start_date = new Date(settings.start_date);
      }

      end_date = new Date(start_date);
      end_date.setMonth(end_date.getMonth() + 12);
      end_date.setDate(end_date.getDate() - 1);

      var loop_html = "";
      var step = 13;

      var month_position = [];
      month_position.push({ month_index: start_date.getMonth(), x: 0 });
      var using_month = start_date.getMonth();

      var week = 0;
      var g_x = week * step;
      var item_html = '<g transform="translate(' + g_x.toString() + ', 0)">';

      for (
        ;
        start_date.getTime() <= end_date.getTime();
        start_date.setDate(start_date.getDate() + 1)
      ) {
        if (start_date.getDay() == 0) {
          var item_html =
            '<g transform="translate(' + g_x.toString() + ', 0)">';
        }

        var month_in_day = start_date.getMonth();
        var data_date = getDisplayDate(start_date);

        if (start_date.getDay() == 0 && month_in_day != using_month) {
          using_month = month_in_day;
          month_position.push({ month_index: using_month, x: g_x });
        }
        var count = getCount(data_date);
        var color = getColor(count);

        var y = start_date.getDay() * step;
        item_html +=
          '<rect class="day" width="11" height="11" y="' +
          y +
          '" fill="' +
          color +
          '" data-count="' +
          count +
          '" data-date="' +
          data_date +
          '" rx="' +
          radius +
          '" ry="' +
          radius +
          '"/>';

        if (start_date.getDay() == 6) {
          item_html += "</g>";
          loop_html += item_html;

          item_html = null;

          week++;
          g_x = week * step;
        }
      }

      if (item_html != null) {
        item_html += "</g>";
        loop_html += item_html;
      }

      //trick
      if (month_position[1].x - month_position[0].x < 40) {
        //Fix ugly graph by remove first item
        month_position.shift(0);
      }

      for (var i = 0; i < month_position.length; i++) {
        var item = month_position[i];
        var month_name = settings.month_names[item.month_index];
        loop_html +=
          '<text x="' +
          item.x +
          '" y="-5" class="month">' +
          month_name +
          "</text>";
      }

      //Add Monday, Wenesday, Friday label
      loop_html +=
        '<text text-anchor="middle" class="wday" dx="-10" dy="22">{0}</text>'.formatString(
          settings.h_days[0],
        ) +
        '<text text-anchor="middle" class="wday" dx="-10" dy="48">{0}</text>'.formatString(
          settings.h_days[1],
        ) +
        '<text text-anchor="middle" class="wday" dx="-10" dy="74">{0}</text>'.formatString(
          settings.h_days[2],
        );

      //Fixed size for now with width= 721 and height = 110
      var wire_html =
        '<svg width="721" height="110" viewBox="0 0 721 110"  class="js-calendar-graph-svg">' +
        '<g transform="translate(20, 20)">' +
        loop_html +
        "</g>" +
        "</svg>";

      wrap_chart.html(wire_html);

      $(_this)
        .find(".day")
        .on("click", function () {
          if (clickCallback) {
            clickCallback(
              $(this).attr("data-date"),
              parseInt($(this).attr("data-count")),
            );
          }
        });

      $(_this)
        .find(".day")
        .hover(
          function () {
            $(this).attr("style", "stroke-width: 1; stroke: " + hoverColor);
          },
          function () {
            $(this).attr("style", "stroke-width:0");
          },
        );

      _this.find("rect").on("mouseenter", mouseEnter);
      _this.find("rect").on("mouseleave", mouseLeave);
      appendTooltip();
    };

    var mouseLeave = function (evt) {
      $(".svg-tip").hide();
    };

    //handle event mouseenter when enter into rect element
    var mouseEnter = function (evt) {
      var target_offset = $(evt.target).offset();
      var count = $(evt.target).attr("data-count");
      var date = $(evt.target).attr("data-date");

      var count_text = count > 1 ? settings.texts[1] : settings.texts[0];
      var text = "{0} {1} on {2}".formatString(count, count_text, date);

      var svg_tip = $(".svg-tip").show();
      svg_tip.html(text);
      var svg_width = Math.round(svg_tip.width() / 2 + 5);
      var svg_height = svg_tip.height() * 2 + 10;

      svg_tip.css({ top: target_offset.top - svg_height - 5 });
      svg_tip.css({ left: target_offset.left - svg_width });
    };
    //Append tooltip to display when mouse enter the rect element
    //Default is display:none
    var appendTooltip = function () {
      if ($(".svg-tip").length == 0) {
        $("body").append(
          '<div class="svg-tip svg-tip-one-line" style="display:none" ></div>',
        );
      }
    };

    var settings = $.extend(
      {
        colors: ["#eeeeee", "#d6e685", "#8cc665", "#44a340", "#44a340"],
        //colors: ['#eeeeee', '#e68585', '#c66865', '#ff4742', '#ff4742'],
        border: {
          radius: 2,
          hover_color: "#999",
        },
        click: null,
        start_date: null,
        //List of name months
        month_names: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        h_days: ["M", "W", "F"],
        //Default is empty, it can be overrided
        data: [],
      },
      options,
    );

    var _this = $(this);

    start();
  };
})(jQuery);

我从以下地方致电

get_activity

：

$(document).ready(function () {
   get_activity();
});

Answer 1

您没有显示重要的内容，例如您何时调用 get_activity

您可以进一步简化，以确保您在需要时拥有所需的一切：

$(() => {
  $.getJSON("?handler=LoadActivity", (data) => {
    $('#activityMap').github_graph({
      data: processActivitiesData(data.activities),
      texts: ['activity', 'activities']
    });
  });
});

如果您需要定期更新它（您那么活跃吗？），那么销毁并重新创建 $('#activityMap') 因为您找到的代码似乎没有重新初始化方法