Highcharts实现柱状、饼状与曲线图三图合一

Highcharts实现柱状、饼状与曲线图三图合一

在数据统计和分析场景中，有时需要在一个图表中同时呈现柱状图、饼状图和曲线图。这种组合既能从柱状图中查看具体数据，又能通过曲线图观察变化趋势，还能利用饼状图展示各部分数据的比重。Highcharts库能够轻松实现这种三图合一的可视化效果。

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
                    },
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
                    },
subtitle: {
text: 'Source: Wikipedia.org'
                    },
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
                        }
                    },
yAxis: {
title: {
text: 'Billions'
                        },
labels: {
formatter: function() {
return this.value / 1000;
                            }
                        }
                    },
tooltip: {
formatter: function() {
return ''+
this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
                        }
                    },
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
                            }
                        }
                    },
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
                    }, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
                    }, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
                    }, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
                    }, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
                    }]
                });
            });

以上就是本文所述的全部内容了，希望对大家使用jQuery绘制柱状图饼状图曲线图能够有所帮助