Creare grafici in Javascript con ApexChart

Creare grafici in Javascript con ApexChart

ApexChart è una delle tante librerie per Javascript per la creazione di grafici.

Vi dirò che non è affatto male, è piena di opzioni e moderna dal punto di vista grafico.

Vi basta includere questa questa righe:

<script src="jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Quindi la libreria più jQuery.

Questo il codice della mia funzione:

function apexChart(idComponent, titolo, labels, values) {
    var options = {
        chart: {
            width: 700,
            type: 'pie',
            animations: {
                enabled: true,
                easing: 'easeinout',
                speed: 800,
                animateGradually: {
                    enabled: true,
                    delay: 150
                },
                dynamicAnimation: {
                    enabled: true,
                    speed: 350
                }
            },
            toolbar: {
                show: true,
                tools: {
                    download: true,
                }
            }
        },
        title: {
            text: titolo,
            style: {
                fontSize: '25px',
                align: 'center'
            }
        },
        dropShadow: {
            enabled: true,
            top: 10,
            left: 10,
            blur: 3,
            opacity: 1
        },
        labels: labels,
        series: values,
        responsive: [{
            breakpoint: 767,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: 'bottom'
                }
            }
        }],
        theme: {
            palette: 'palette1'
        }
    };

    var chart = new ApexCharts(
        document.querySelector(idComponent),
        options
    );

    chart.render();
}

In pratica uso questa funzione per più grafici a torta, nei quali cambio solo il div contenitore, il titolo e il set di dati.

Per quanto riguarda i dati, avendo poco tempo, ho deciso di fare un pò una zozzata, e costruire la string con PHP:


$artsS = $objArticoli->countTotaliSezione();

// COSTRUISCO STRINGA
$labelsS = '[';
$valoriS = '[';
foreach ($artsS as $v) {
    $labelsS .= "'" . $v['s_nome'] . "',";
    $valoriS .= $v['cnt'] . ",";
}
$labelsS .= ']';
$valoriS .= ']';

In pratica creo due stringhe che formano degli array per Javascript.

Poi passo tutto alla funzione:

$(function () {
  apexChart('#chartSezione', 'Articoli per sezione', <?php echo $labelsS; ?>, <?php echo $valoriS; ?>);
});

Come compito, potreste cercare di migliorare questo accrocco!

Enjoy!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2572 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy