javascript - 为 HTML5 画布上的交互式可拖动饼图适配一个 javascript 类，并将其集成到 Webflow 中

Question

我在 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);
      }
    }

Answer 1

[...] 即使我使用相同的 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