我正在尝试在 Webflow 的图表中制作带有标签的 chart.js。也许是从 chart.js 下载插件有问题？我可以看到 https://www.w3schools.com/js/tryit.asp?filename=tryjs_default 也不起作用。
Chart.js 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chart.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<style>
.chartjs-title {
font-family: Roboto;
}
#inputValue {
width: 200px;
height: 100px;
font-size: 20px;
}
#inputContainer {
display: flex;
justify-content: center;
align-items: center;
}
const ctx = document.getElementById('myChart');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: \['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'\],
datasets: \[{
data: \[12, 19, 3, 5, 2, 3\],
borderWidth: 1
}\]
},
options: {
plugins: {
legend: {
display: false
},
datalabels: {
anchor: 'end',
align: 'top',
offset: -6,
font: {
family: 'Roboto',
size: 16
},
formatter: function(value, context) {
return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
}
}
},
indexAxis: 'y',
scales: {
x: {
ticks: {
fontFamily: 'Roboto',
callback: function(value, index, values) {
return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
}
},
grid: {
display: false
}
},
y: {
ticks: {
fontFamily: 'Roboto',
anchor: 'end'
},
grid: {
display: false
}
}
}
}
});
const input = document.getElementById('inputValue');
input.addEventListener('input', () =\> {
chart.data.datasets\[0\].data = \[
input.value \* 0.8 + 10,
input.value \* 0.9 + 10,
input.value \* 2 + 10,
input.value \* 3 + 10,
input.value \* 4 + 10,
input.value \* 10 + 10
\];
chart.update();
});
我正在尝试在图表中添加标签，而不是像数字这样的数据标签，而是像红色、蓝色、橙色…… 在 webflow 中，您只能添加嵌入代码容器，所以我想知道我想要实现的目标是否可行：C