How to use combination charts to display data in Highcharts

How to use combination charts to display data in Highcharts requires specific code examples

With the popularity of data visualization in all walks of life, more people are starting to use it Highcharts is a powerful JavaScript charting library to display data. In practical applications, it is often necessary to display the changing trends of multiple indicators, which requires the use of the combination chart function.

Highcharts provides a powerful combination chart function that can mix multiple different types of charts together to better convey the meaning of the data. This article will introduce how to use combination charts to display data in Highcharts, and give specific code examples.

First, we need to create a chart with multiple different series. For example, we want to show sales and profit trends over a period of time. First, we can create a basic line chart to show changes in sales:

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
        title: {
            text: '金额'
        }
    },
    series: [{
        name: '销售额',
        data: [100, 200, 300, 400, 500, 600, 700]
    }]
});

Next, we can create a bar chart to show changes in profits:

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }]
});

In the above code , we used yAxis to define two y-axes, corresponding to sales and profit respectively. The profit data is displayed using column type series, and the yAxis parameter is specified as 1, which means the second y-axis is used.

In addition to line charts and bar charts, Highcharts also supports other types of charts, such as area charts, pie charts, etc. We can choose different chart types according to our needs and display them together.

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }, {
        name: '利润率',
        type: 'area',
        data: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35],
        yAxis: 1
    }, {
        name: '产品销量',
        type: 'pie',
        data: [{
            name: '产品A',
            y: 10
        }, {
            name: '产品B',
            y: 30
        }, {
            name: '产品C',
            y: 50
        }]
    }]
});

In the above code, we added an area chart (series.type is area) and a pie chart (series.type is pie). Combining different types of charts through different series can display data more comprehensively.

In summary, through the combined chart function of the Highcharts library, we can mix and display multiple different types of charts together to better convey the meaning of the data. You only need to select different chart types according to your needs and add their configuration information to the series. I hope this article can help you understand how to use combination charts to display data in Highcharts.

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