0

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

1 回答 1

0

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

在此处输入图像描述

于 2020-03-20T07:28:45.653 回答