Адаптация класса javascript для интерактивных перетаскиваемых диаграмм p ie на холсте HTML5 и интеграция его в Webflow

Question

Я нашел этот красивый холст p ie на Github, но это доставляет мне некоторые проблемы. Я не очень хорошо разбираюсь в JS, поэтому я здесь прошу помощи. https://github.com/jamesalvarez/draggable-piechart

В примере, показанном здесь, вы можете видеть пользовательский интерфейс для управления графикой c. https://codepen.io/Waterbear83/pen/vYOrbva?editors=0010

Я не понимаю, как отобразить этот интерфейс, даже если я использую тот же js. 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