How to create a sinusoidal chart using Highcharts

Highcharts is a powerful JavaScript chart library that provides a rich API library and flexible configuration options to easily create various types of charts.

This article will introduce how to use Highcharts to create a sinusoidal chart and provide specific code examples.

Step 1: Create an HTML page and introduce the Highcharts library

First we need to create an HTML page and introduce the Highcharts library. You can introduce the library file in the following way:

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

Step 2: Set curve data

Next, we need to prepare a set of data for drawing sine curves. In this example, we use the following code to generate curve data:

var data = [];

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

Step 3: Draw the curve chart

Now that we have the data ready, we can start drawing the curve chart. In Highcharts, we can create a basic curve chart using the following code:

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

In the above code, we create a basic curve chart using the Highcharts.chart function. We set the ID of the drawing area to container. The chart attribute specifies the chart type as spline, which is a curve chart. titleAttribute sets the chart title to "Sine Curve Chart".

In xAxis, we define the title of the X-axis as "Angle".

In yAxis, we define the title of the Y-axis as "value", and set the minimum value of the Y-axis to -1 and the maximum value to 1.

Finally, we add the data set to the curve chart using the series attribute. The name of the data set is "Sine Curve", and the data is the data array generated in the previous step.

The complete code is as follows:

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

Now you have successfully created a simple sinusoidal chart!

The above is the detailed content of How to create a sinusoidal chart using Highcharts. For more information, please follow other related articles on the PHP Chinese website!