我使用“chartjs-plugin-data labels v2.1.0”插件,要创建幸运轮,需要将标签栏中的文本替换为img,如何做到这一点?
在常规JS中,标签行的值为'2','3'等,然后我想推送img 我怎么解决这个问题?很快需要你的帮助
const spinWheel = document.getElementById("spinWheel");
const spinBtn = document.getElementById("spin_btn");
const text = document.getElementById("text");
const spinValues = [
{ minDegree: 31, maxDegree: 60, value: "Ноутбук игровой MSI Katana GF76 12UD-263RU" },
{ minDegree: 0, maxDegree: 30, value: "Lush3 + Ridge x 1 + Микрофон HyperX Quadcast S" },
{ minDegree: 61, maxDegree: 90, value: "Беззеркальная камера Canon EOS R50 Body" },
{ minDegree: 331, maxDegree: 360, value: "Lovense Webcam + Domi 2" },
{ minDegree: 301, maxDegree: 330, value: '"Капуста"' },
{ minDegree: 271, maxDegree: 300, value: '"Картошка"' },
{ minDegree: 211, maxDegree: 240, value: "Apple iPhone 15" },
{ minDegree: 241, maxDegree: 270, value: '"Морковь"' },
{ minDegree: 181, maxDegree: 210, value: "Cougar Throne – кресло для геймеров" },
{
minDegree: 151,
maxDegree: 180,
value: "Сертификат ВБ",
},
];
const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var spinColors = ["#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032"];
let spinChart = new Chart(spinWheel, {
plugins: [ChartDataLabels],
type: "pie",
data: {
labels: ['<img src="/img/11.png">', "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [
{
backgroundColor: spinColors,
data: size,
},
],
},
options: {
responsive: true,
animation: { duration: 0 },
plugins: {
tooltip: false,
legend: {
display: false,
},
datalabels: {
rotation: 90,
color: "#ffffff",
formatter: (_, context) => context.chart.data.labels[context.dataIndex],
font: { size: 24 },
},
},
},
});
const generateValue = (angleValue) => {
for (let i of spinValues) {
if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
text.innerHTML = `<p>Поздравляем, вы выиграли: <br> ${i.value} ! </p>`;
spinBtn.disabled = false;
break;
}
}
};
let count = 0;
let resultValue = 101;
spinBtn.addEventListener("click", () => {
// spinBtn.disabled = false;
// text.innerHTML = `<p>Желаю Удачи!</p>`;
let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
let rotationInterval = window.setInterval(() => {
spinChart.options.rotation = spinChart.options.rotation + resultValue;
spinChart.update();
if (spinChart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
spinChart.options.rotation = 0;
} else if (count > 15 && spinChart.options.rotation == randomDegree) {
generateValue(randomDegree);
clearInterval(rotationInterval);
count = 0;
resultValue = 101;
}
}, 10);
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.1.0/chartjs-plugin-datalabels.min.js"></script>
<div>
<canvas id="spinWheel"></canvas>
</div>
<div id="spin_btn">spin_btn</div>
<div id="text">text</div>
chartjs-plugin-datalabels 似乎还没有准备好处理图像。
如果没有任何具体原因使用该插件,您可以使用 chartjs-plugin-labels ,它似乎更适合您当前的需求。
这是您的旋转轮,其中所有标签都具有相同的图像(chartjs 徽标)。如果您想更改任何图像或图像的大小,您可以更改插件选项。
const spinWheel = document.getElementById("spinWheel");
const spinBtn = document.getElementById("spin_btn");
const text = document.getElementById("text");
const spinValues = [
{ minDegree: 31, maxDegree: 60, value: "Ноутбук игровой MSI Katana GF76 12UD-263RU" },
{ minDegree: 0, maxDegree: 30, value: "Lush3 + Ridge x 1 + Микрофон HyperX Quadcast S" },
{ minDegree: 61, maxDegree: 90, value: "Беззеркальная камера Canon EOS R50 Body" },
{ minDegree: 331, maxDegree: 360, value: "Lovense Webcam + Domi 2" },
{ minDegree: 301, maxDegree: 330, value: '"Капуста"' },
{ minDegree: 271, maxDegree: 300, value: '"Картошка"' },
{ minDegree: 211, maxDegree: 240, value: "Apple iPhone 15" },
{ minDegree: 241, maxDegree: 270, value: '"Морковь"' },
{ minDegree: 181, maxDegree: 210, value: "Cougar Throne – кресло для геймеров" },
{ minDegree: 151,maxDegree: 180,value: "Сертификат ВБ" },
];
const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var spinColors = ["#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032", "#303032"];
let spinChart = new Chart(spinWheel, {
type: "pie",
data: {
labels: ['1', "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [
{
label: 'My first dataset',
backgroundColor: spinColors,
data: size,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
animation: { duration: 0 },
plugins: {
tooltip: false,
legend: {
display: false,
},
labels: {
render: 'image',
images: [
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
{ src: 'https://www.chartjs.org/img/chartjs-logo.svg', width: 32, height: 32 },
]
},
},
},
});
const generateValue = (angleValue) => {
for (let i of spinValues) {
if (angleValue >= i.minDegree && angleValue <= i.maxDegree) {
text.innerHTML = `<p>Поздравляем, вы выиграли: <br> ${i.value} ! </p>`;
spinBtn.disabled = false;
break;
}
}
};
let count = 0;
let resultValue = 101;
spinBtn.addEventListener("click", () => {
// spinBtn.disabled = false;
// text.innerHTML = `<p>Желаю Удачи!</p>`;
let randomDegree = Math.floor(Math.random() * (355 - 0 + 1) + 0);
let rotationInterval = window.setInterval(() => {
spinChart.options.rotation = spinChart.options.rotation + resultValue;
spinChart.update();
if (spinChart.options.rotation >= 360) {
count += 1;
resultValue -= 5;
spinChart.options.rotation = 0;
} else if (count > 15 && spinChart.options.rotation == randomDegree) {
generateValue(randomDegree);
clearInterval(rotationInterval);
count = 0;
resultValue = 101;
}
}, 10);
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/chart.js-plugin-labels-dv/dist/chartjs-plugin-labels.min.js"></script>
<div>
<canvas id="spinWheel"></canvas>
</div>
<div id="spin_btn">spin_btn</div>
<div id="text">text</div>