ハイチャートを使用して正弦波チャートを作成する方法

Highcharts は、さまざまな種類のグラフを簡単に作成するための豊富な API ライブラリと柔軟な構成オプションを提供する強力な JavaScript グラフ ライブラリです。

この記事では、Highcharts を使用して正弦波グラフを作成する方法を紹介し、具体的なコード例を示します。

ステップ 1: HTML ページを作成し、Highcharts ライブラリを導入する

まず、HTML ページを作成し、Highcharts ライブラリを導入する必要があります。次の方法でライブラリ ファイルを導入できます。

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

ステップ 2: 曲線データの設定

次に、正弦曲線を描画するためのデータのセットを準備する必要があります。この例では、次のコードを使用して曲線データを生成します。

var data = [];

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

ステップ 3: 曲線チャートを描画する

データの準備ができたので、曲線チャートの描画を開始できます。 Highcharts では、次のコードを使用して基本的な曲線チャートを作成できます。

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

上記のコードでは、Highcharts.chart 関数を使用して基本的な曲線チャートを作成します。描画領域の ID を container に設定します。 chart 属性は、グラフ タイプを spline (曲線グラフ) として指定します。 title属性は、チャートのタイトルを「正弦曲線チャート」に設定します。

xAxis では、X 軸のタイトルを「角度」として定義します。

yAxisでは、Y軸のタイトルを「値」として定義し、Y軸の最小値を-1、最大値を1に設定します。

最後に、series 属性を使用してデータ セットを曲線グラフに追加します。データ セットの名前は「Sine Curve」で、データは前の手順で生成された data 配列です。

完全なコードは次のとおりです:

    
    
    <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>

これで、単純な正弦波グラフが正常に作成されました。

以上がハイチャートを使用して正弦波チャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。