如何在chartjs-plugin-data labels v2.1.0插件中设置照片?

gcuhipw9  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(130)

我使用'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);
});

个字符

06odsfpq

06odsfpq1#

似乎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);
});

个字符

相关问题