Comment créer un graphique sinusoïdal à l'aide de Highcharts

Highcharts est une puissante bibliothèque de graphiques JavaScript qui fournit une riche bibliothèque d'API et des options de configuration flexibles pour créer facilement différents types de graphiques.

Cet article expliquera comment utiliser Highcharts pour créer un graphique sinusoïdal et fournira des exemples de code spécifiques.

Étape 1 : Créer une page HTML et présenter la bibliothèque Highcharts

Nous devons d'abord créer une page HTML et présenter la bibliothèque Highcharts. Vous pouvez importer le fichier de bibliothèque de la manière suivante :

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

Étape 2 : Définir les données de courbe

Ensuite, nous devons préparer un ensemble de données pour dessiner des courbes sinusoïdales. Dans cet exemple, nous utilisons le code suivant pour générer les données de courbe :

var data = [];

for (var i = 0; i < 360; i++) {
    data.push([i, Math.sin(i * Math.PI / 180)]);
}

Étape 3 : Dessinez le graphique de courbe

Maintenant que les données sont prêtes, nous pouvons commencer à dessiner le graphique de courbe. Dans Highcharts, nous pouvons créer un graphique de courbes de base en utilisant le code suivant :

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: '正弦曲线图表'
    },
    xAxis: {
        title: {
            text: '角度'
        }
    },
    yAxis: {
        title: {
            text: '值'
        },
        min: -1,
        max: 1
    },
    series: [{
        name: '正弦曲线',
        data: data
    }]
});

Dans le code ci-dessus, nous créons un graphique de courbes de base en utilisant la fonction Highcharts.chart. Nous définissons l'ID de la zone de dessin sur conteneur. L'attribut chart spécifie le type de graphique comme spline, qui est un graphique courbe. L'attribut title définit le titre du graphique sur "Sine Curve Chart". Highcharts.chart函数创建了一个基本的曲线图表。我们将绘图区域的ID设置为container。chart属性指定图表类型为spline，即曲线图表。title属性设置图表标题为“正弦曲线图表”。

在xAxis中，我们定义了X轴的标题为“角度”。

在yAxis中，我们定义了Y轴的标题为“值”，同时将Y轴的最小值设置为-1，最大值设置为1。

最后，我们使用series属性将数据集添加到曲线图表中。数据集的名称为“正弦曲线”，数据为上一步中生成的data

Dans xAxis, nous définissons le titre de l'axe X comme "Angle".

Dans yAxis, nous définissons le titre de l'axe Y comme "valeur", et fixons la valeur minimale de l'axe Y à -1 et la valeur maximale à 1.

Enfin, nous utilisons l'attribut series pour ajouter l'ensemble de données au graphique courbe. Le nom de l'ensemble de données est "Sine Curve" et les données sont le tableau data généré à l'étape précédente. 🎜🎜Le code complet est le suivant : 🎜

    
    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


    

    <script>
        var data = [];

        for (var i = 0; i < 360; i++) {
            data.push([i, Math.sin(i * Math.PI / 180)]);
        }

        Highcharts.chart('container', {
            chart: {
                type: 'spline'
            },
            title: {
                text: '正弦曲线图表'
            },
            xAxis: {
                title: {
                    text: '角度'
                }
            },
            yAxis: {
                title: {
                    text: '值'
                },
                min: -1,
                max: 1
            },
            series: [{
                name: '正弦曲线',
                data: data
            }]
        });
    </script>

🎜Vous avez maintenant créé avec succès un diagramme sinusoïdal simple ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!