Graphique à nuages de points groupés-js tutoriel-php.cn

Graphique à nuages de points groupés

Linda Hamilton

Libérer： 2024-10-31 20:37:02

original

884 Les gens l'ont consulté

Clustered Scatter Chart

Visualiser la distance parcourue par les joueurs de football avec ZingChart

Dans ce tutoriel, nous allons créer un nuage de points à l'aide de ZingChart pour visualiser la distance parcourue par les joueurs dans différents matchs de football. Le graphique montre des données simulées sur plusieurs jeux, donnant un aperçu des distances parcourues minute par minute.

Explication du code

Cet extrait de code utilise JavaScript pour générer de fausses données pour huit jeux, puis configure et restitue un nuage de points à l'aide de ZingChart.

Données des jeux : Chaque jeu est représenté comme une série de données unique.
Distances aléatoires : Les distances pour chaque minute du jeu sont randomisées pour imiter la distribution dans le monde réel.
Configuration du graphique : Le graphique est configuré avec le type de nuage de points de ZingChart, des marqueurs et des axes personnalisables.

Vous trouverez ci-dessous le code HTML et JavaScript complet pour créer ce graphique.

Extrait de code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script>
// CHART CONFIG
// -----------------------------
let chartConfig = {
    type: 'hbar',
    theme: 'dark',
    title: {
        text: 'Average Temperatures',
        marginLeft: '20px',
    },
    legend: {
        align: 'left',
        backgroundColor: 'none',
        borderWidth: '0px',
        item: {
            cursor: 'hand',
            fontColor: '#E3E3E5',
        },
        marker: {
            type: 'circle',
            borderWidth: '0px',
            cursor: 'hand',
        },
        offsetY: '25px',
        verticalAlign: 'top',
    },
    plot: {
        tooltip: {
            text: '%data-city<br>High: %data-highs<br>Low: %data-lows',
        },
    },
    plotarea: {
        margin: '120px 50px 60px 85px',
    },
    scaleX: {
        label: {
            text: '2020',
            fontSize: '14px',
        },
        labels: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec',
        ],
        zooming: true,
        zoomTo: [0, 5],
    },
    scaleY: {
        format: '%v°F',
        guide: {
            lineStyle: 'solid',
        },
        label: {
            text: 'Temperature',
            fontSize: '14px',
        },
    },
    shapes: [
        {
            type: 'rectangle',
            id: 'view_all',
            backgroundColor: '#5e5e5e',
            borderColor: '#E3E3E5',
            borderRadius: '3px',
            borderWidth: '1px',
            cursor: 'hand',
            height: '20px',
            label: {
                text: 'View All',
                bold: true,
                fontColor: '#E3E3E5',
                fontSize: '12px',
            },
            width: '75px',
            x: '89%',
            y: '7%',
        },
    ],
    series: [
        {
            text: 'New Orleans Average Temps 2020',
            values: [17, 17, 19, 18, 17, 15, 16, 16, 15, 17, 19, 17],
            dataCity: 'New Orleans',
            dataHighs: [62, 65, 72, 78, 85, 89, 91, 91, 87, 80, 72, 64],
            dataLows: [45, 48, 53, 60, 68, 74, 75, 75, 72, 63, 53, 47],
            offsetValues: [45, 48, 53, 60, 68, 74, 75, 75, 72, 63, 53, 47],
        },
        {
            text: 'San Diego Average Temps 2020',
            values: [16, 14, 13, 11, 10, 9, 10, 9, 9, 12, 15, 17],
            dataCity: 'San Diego',
            dataHighs: [65, 65, 66, 67, 69, 71, 75, 76, 76, 73, 69, 65],
            dataLows: [49, 51, 53, 56, 59, 62, 65, 67, 65, 61, 54, 48],
            offsetValues: [49, 51, 53, 56, 59, 62, 65, 67, 65, 61, 54, 48],
        },
        {
            text: 'Denver Average Temps 2020',
            values: [27, 27, 27, 27, 29, 30, 31, 31, 31, 29, 27, 27],
            dataCity: 'Denver',
            dataHighs: [45, 46, 54, 61, 72, 82, 90, 88, 79, 66, 52, 45],
            dataLows: [18, 19, 27, 34, 43, 52, 59, 57, 48, 37, 25, 18],
            offsetValues: [18, 19, 27, 34, 43, 52, 59, 57, 48, 37, 25, 18],
        },
    ],
    scrollX: {},
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
    id: 'myChart',
    data: chartConfig,
    height: '100%',
    width: '100%',
});
// EVENTS
// -----------------------------
// store the original zoom level info
const origin_zoomin_level = zingchart.exec('myChart', 'getzoom');
// a flag to control the view
let switch_view = 'viewall';
zingchart.shape_click = (p) => {
    if (p.shapeid == 'view_all') {
        switch (switch_view) {
            case 'viewall':
                // change zoom level to viewall
                zingchart.exec(p.id, 'viewall');
                // update the switch button text label
                // to Previous View
                zingchart.exec(p.id, 'updateobject', {
                    type: 'shape',
                    data: {
                        id: 'view_all',
                        label: {
                            text: 'Original View',
                        },
                        width: '110px',
                    }
                });
                // set the flag to previous_view 
                switch_view = 'original_view';
                break;
            case 'original_view':
                // scale-x and scale-y are array from 
                // origina_zoomin_level object
                let scale_x = origin_zoomin_level['scale-x'];
                let scale_y = origin_zoomin_level['scale-y'];
                // use zoomtovalues to get back to original zoom
                // level, pass attributes from origin_zoomin_level 
                // object xmin, xmax, ymin, ymax as parameter
                zingchart.exec(p.id, 'zoomtovalues', {
                    graphid: 0,
                    xmin: scale_x.xmin,
                    xmax: scale_x.xmax,
                    ymin: scale_y.ymin,
                    ymax: scale_y.ymax
                });
                // update the switch button text label
                // to View All
                zingchart.exec(p.id, 'updateobject', {
                    type: 'shape',
                    data: {
                        id: 'view_all',
                        label: {
                            text: 'View All',
                        },
                        width: '75px',
                    }
                });
                // change the flag back to viewall
                switch_view = 'viewall';
                break;
        }
    }
};

    </script>
    <style>
      .zc-body { background:#000; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}
    </style>
  </head>
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

  </body>
</html>

Copier après la connexion

Exécuter le code

Copiez le code dans un fichier HTML et ouvrez-le dans votre navigateur.
Vous devriez voir un nuage de points avec chaque jeu représenté, montrant les distances aléatoires parcourues par les joueurs sur 90 minutes.

Conclusion

Ce graphique fournit un moyen clair et personnalisable de représenter des données temporelles, telles que les mouvements des joueurs, avec ZingChart. Bon codage !