Круговая диаграмма с помощью Aura

Для новачків Потрібна допомога
1

Всем Привет.

Нужна помощь.

Нужно,что бы круговая диаграмма(аля donut chart) была закрашена в соответствии с указанными процентами. И использовать только 2 цвета.

Тоесть если у нас 38%, то 38% должны быть закрашены в синий,а 62% в белый.

И всё это нужно написать с помощью Aura)

Буду благодарна за идеи,как это реализовать.

2

Как вариант, диаграмма на чистом css. Разберитесь с разметкой и в нужных местах поставьте переменные и меняйте динамически:
https://codepen.io/hilar47/pen/RprXev

2 Вподобання
3

не уверен, что в ауре есть стандартный компонент для такого.

так что нужно найти какую-нибудь JS библиотеку, которая рисует такие бублики,

и попробовать прикрутить ее к ауре

4

Есть в ауре конечно
https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-ring/example

5
6

это не круговая диаграмма

7

Как раз таки это круговая диаграмма, значение которой задается в js, а цвет и размер можно отрегулировать стилями

8

Можно использовать chart.js библиотеку, тогда вся диаграмма будет очень гибкой и настраиваемой.
Например, вот код для диаграммы с ассетами по количеству активных/неактивных

import { loadScript } from 'lightning/platformResourceLoader';
import LIB_CHART_JS from "@salesforce/resourceUrl/chart_js_lib";

const getChartConfig = (activeCount, inactiveCount) => {
    return {
        type: 'doughnut',
        data: {
            labels: ["Active", "Inactive"],
            datasets: [{
                label: "",
                data: [activeCount, inactiveCount],
                backgroundColor: ["rgb(75, 202, 129)","rgb(236, 112, 146)",],
                cutout: "20%",
            }],
        },
        options: {
            plugins: {
                legend: { display: true, position: "left",  align: "end", labels: { usePointStyle: true, pointStyle: 'circle',},},
                tooltip: { enabled: true,},
                labels: {render: 'value', fontColor: '#fff', },
            },
            responsive: false,
        },

    };
}

export default class AssetChart extends LightningElement {
    @api activeCount;
    @api inactiveCount;
    // code to get the data and load chart.js, then call this.initChartData()
    initChartData = () => {
        let canvas = this.template.querySelector("canvas");
        const chartConfig = getChartConfig(this.activeCount, this.inactiveCount);
        this.chartEngine = new window.Chart(canvas, chartConfig);
    }
}
1 Вподобання