javascript - 为 HTML5 画布上的交互式可拖动饼图适配一个 javascript 类,并将其集成到 Webflow 中
问题描述
我在 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">+</div>';
var minus =
'<div id="min-' +
dimensions[i] +
'" class="adjust-button" data-i="' +
i +
'" data-d="1">−</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">+</div>';
var minus =
'<div id="min-' +
data[i] + // <-------------- AND HERE -----------------
'" class="adjust-button" data-i="' +
i +
'" data-d="1">−</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 行更改数据(见图)