How to create a donut chart using Highcharts

How to use Highcharts to create a donut chart requires specific code examples

1. Introduction
Highcharts is a popular JavaScript chart library that can be used to create various Types of interactive charts and visualizations. One of them is the donut chart, which is an effective way to display the proportion of data. This article will introduce how to use the Highcharts library to create a donut chart, and attach specific code examples.

2. The basic structure of the donut chart
The donut chart consists of a ring and a series of sectors. Each sector represents a data item. The size and angle of the sector are determined according to the size of the data. The center of a donut chart is usually used to display overall data or other relevant information.

3. Preparation work
Before you start using Highcharts to create a donut chart, you need to introduce the Highcharts library first. You can add the following code in the header:

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

4. Create a basic donut chart
First, to create a basic donut chart, the following most basic configuration items are required:

// 创建chart对象
var chart = Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: '环形图示例'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            showInLegend: true
        }
    },
    series: [{
        name: '占比',
        colorByPoint: true,
        data: [{
            name: '数据一',
            y: 30
        }, {
            name: '数据二',
            y: 20
        }, {
            name: '数据三',
            y: 50
        }]
    }]
});

In In the above code, we created a basic Highcharts chart object and specified the chart type as "pie", which is a pie chart. Next, the data items to be displayed are set through the "series" configuration item. Each data item has a name and corresponding value. "pie" in the "plotOptions" configuration item sets some display options for the pie chart, including the display format of the data labels and whether to display them in the legend. Finally, we add an element with the id "container" to the HTML page, and Highcharts will render the chart into this element.

Run the above code, you can see a pie chart containing three sectors on the page, each sector represents the proportion of a data item.

5. Further customization of the donut chart
The above code is just a basic donut chart example. Highcharts also provides many other configuration options so that you can further customize and beautify the donut chart. The following are some common configuration options:

1. Color and style
   The color of each data item can be specified in the "series" configuration item. You can use predefined color names or use hexadecimal color codes. In addition, you can also set the inner and outer radius of the pie chart and modify the style of the donut chart.
2. Legend and data labels
   The "pie" in the "plotOptions" configuration item provides many options for setting legends and data labels, including position, style, formatting, etc. You can adjust these options as needed.
3. Animation Effect
   Highcharts provides a wealth of animation effect options, which can be customized through "animation" in the "plotOptions" configuration item.
4. Interactive behavior
   By setting the "allowPointSelect" and "cursor" options in the "plotOptions" configuration item, the click interaction effect of the pie chart can be achieved.

These are just some common configuration options. Highcharts has many other features and customization options that can be further explored based on specific needs.

6. Summary
This article introduces how to use the Highcharts library to create a donut chart and gives specific code examples. By learning and mastering the relevant APIs of Highcharts, you can easily create various types of charts and visualizations. I hope this article was helpful to you, and I wish you success in creating donut charts with Highcharts!

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