将JavaScript类改编为HTML5画布上的交互式可拖动饼图并将其集成到Webflow中

2024-05-20 • 问答

我在Github上发现了这个漂亮的画布派，但这给我带来了一些问题。我的JS不太好，所以我在这里寻求帮助。 https://github.com/jamesalvarez/draggable-piechart

在此处显示的示例中，您可以看到用于操作图形的UI。 https://codepen.io/Waterbear83/pen/vYOrbva?editors=0010

即使我使用相同的js，我也不知道如何显示该UI。 https://codepen.io/Waterbear83/pen/yLNqVBZ?editors=0010

有没有人乐于助人？

谢谢！

  function onPieChartChange(piechart) {
      var table = document.getElementById("proportions-table");
      var percentages = piechart.getallSliceSizePercentages();

      var labelsRow = "<tr>";
      var propsRow = "<tr>";
      for (var i = 0; i < proportions.length; i += 1) {
        labelsRow += "<th>" + proportions[i].format.label + "</th>";

        var v = "<var>" + percentages[i].toFixed(0) + "%</var>";
        var plus =
          '<div id="plu-' +
          dimensions[i] +
          '" class="adjust-button" data-i="' +
          i +
          '" data-d="-1">&#43;</div>';
        var minus =
          '<div id="min-' +
          dimensions[i] +
          '" class="adjust-button" data-i="' +
          i +
          '" data-d="1">&#8722;</div>';
        propsRow += "<td>" + v + plus + minus + "</td>";
      }
      labelsRow += "</tr>";
      propsRow += "</tr>";

      table.innerHTML = labelsRow + propsRow;

      var adjust = document.getElementsByClassname("adjust-button");

      function adjustClick(e) {
        var i = this.getattribute("data-i");
        var d = this.getattribute("data-d");

        piechart.moveAngle(i,d * 0.1);
      }

      for (i = 0; i < adjust.length; i++) {
        adjust[i].addEventListener("click",adjustClick);
      }
    }

[...]即使我使用相同的js

不太一样:)在您的设置onchange: onPieChartChange

中会错过这一点

var newPie = new DraggablePiechart({
    canvas: document.getElementById("piechart"),data: data,onchange: onPieChartChange
});

然后，在onPieChartChange()中还有dimensions（它是同一数组，但是使用函数knuthfisheryates2()随机排序，就像您没有在您的代码，它会引发错误ReferenceError: dimensions is not defined，因为它不存在）项data在函数onPieChartChange(piechart)中进行更改。 proportions也是如此。但是您可以保留此参数而不是替换它，将collapsed: false之类的通用参数放置在label: d.format.label.charAt(0).toUpperCase() + d.format.label.slice(1)之类的其他参数上很方便

var proportions = data.map(function(d,i) { return {
    label: d.format.label,proportion: d.proportion,collapsed: false,format: {
        color: d.format.color,label: d.format.label.charAt(0).toUpperCase() + d.format.label.slice(1) // capitalise first letter
    }
}});

function onPieChartChange(piechart) {
    var table = document.getElementById("proportions-table");
    var percentages = piechart.getAllSliceSizePercentages();

    var labelsRow = "<tr>";
    var propsRow = "<tr>";
    for (var i = 0; i < proportions.length; i += 1) { // <------------------ HERE but keep --------
        labelsRow += "<th>" + proportions[i].format.label + "</th>"; // <--- HERE but keep --------

        var v = "<var>" + percentages[i].toFixed(0) + "%</var>";
        var plus = '<div id="plu-' +
        data[i] + // <----------------- HERE ------------------
        '" class="adjust-button" data-i="' +
        i +
        '" data-d="-1">&#43;</div>';
        var minus =
        '<div id="min-' +
        data[i] + // <-------------- AND HERE -----------------
        '" class="adjust-button" data-i="' +
        i +
        '" data-d="1">&#8722;</div>';
        propsRow += "<td>" + v + plus + minus + "</td>";
    }
    labelsRow += "</tr>";
    propsRow += "</tr>";

    table.innerHTML = labelsRow + propsRow;

    var adjust = document.getElementsByClassName("adjust-button");

    function adjustClick(e) {
        var i = this.getAttribute("data-i");
        var d = this.getAttribute("data-d");

        piechart.moveAngle(i,d * 0.1);
    }

    for (i = 0; i < adjust.length; i++) {
        adjust[i].addEventListener("click",adjustClick);
    }
}

注意：无法使它与角度一起使用，我查看了他的所有示例，他从不使用它，他始终使用proportions: proportions。所以我只是在您的代码中对此进行了更改。

代码很大，可以在此处的代码段中发布：

您可以从744行更改数据（参见图片）

https://codepen.io/jghjghjhg/pen/rNVrwbd

将JavaScript类改编为HTML5画布上的交互式可拖动饼图并将其集成到Webflow中

zmw7152 回答：将JavaScript类改编为HTML5画布上的交互式可拖动饼图并将其集成到Webflow中

大家都在问