How to use 3D charts to display data in Highcharts

Highcharts is a very popular JavaScript charting library that provides many different types of charts, including 3D charts. This article will introduce in detail how to use 3D charts to display data in Highcharts, and provide specific code examples.

1. Introducing the Highcharts library

First, we need to introduce the Highcharts library into the HTML file. This can be achieved in the following ways:

<script src="https://code.highcharts.com/highcharts.js"></script>

2. Preparing data

We need to prepare some data to display in the 3D chart. This data is usually a JavaScript object consisting of an array. For example:

var data = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [{
       name: 'Tokyo',
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
       name: 'New York',
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, {
       name: 'Berlin',
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, {
       name: 'London',
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }]
};

This object contains 4 different data series. Each series includes a name and an array. Each element in the array represents a data point.

3. Create a 3D chart

Next, we can create a 3D chart. First, we need to decide what type of chart we want to create. Highcharts provides several different types of 3D charts, including 3D column charts, 3D scatter charts, 3D cylindrical charts, and 3D maps. In this article, we will create a 3D column chart with the following code:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: data.categories
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: data.series
});

First, we define a div named "container" in the HTML document, which will contain the chart we created.

Then, we use the Highcharts.chart() method to create the chart. In the chart options, we set the type to "column", which means we will create a column chart. We also set the options3d option, enable 3D functionality, and set some 3D parameters such as alpha and beta angles, depth, and more.

We also define some title and axis options, as well as the column option in plotOptions, which is used to set the depth of the column chart.

Finally, we specify the data series and use the previously defined data object to set the name and data of each series.

4. Running the Code

Now that we have our code ready, we can run it in the browser. When we load the HTML file and view the graph, we will see a 3D column chart that will show the average temperature for each month using the data we defined earlier.

Code examples can be viewed in the following code repository:

https://github.com/Jackie199199/Highcharts-3D-Demo

Summary

Highcharts is a very powerful JavaScript charting library that provides a wide variety of chart types and functions, including 3D charts. In this article, we explain how to create 3D charts in Highcharts and provide concrete code examples. If you want to add high-quality, interactive data visualization to your web page or application, Highcharts may be one of your best options.

The above is the detailed content of How to use 3D charts to display data in Highcharts. For more information, please follow other related articles on the PHP Chinese website!