Highcharts图表之多图结合（柱形图，折线图，饼图组合）-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts 实例 | web建站教程(ipkd.cn)</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/highcharts.js"></script>
</head>
<body>
    <div id="myChart" width='100%' height='450'></div>
    <script type="text/javascript">
       $(document).ready(function() {  
           var title = {
              text: 'Highcharts图表之多图结合（柱形图，折线图，饼图组合）'   
           };
           var xAxis = {
              categories: ['vue', 'html', 'css', 'php', 'node']
           };
           var labels = {
              items: [{
                 html: '访问量',
                    style: {
                       left: '50px',
                       top: '18px',
                       color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    }
              }]
           };
           var series= [{
                type: 'column',
                    name: '北京',
                    data: [3, 2, 1, 3, 4]
                }, {
                    type: 'column',
                    name: '上海',
                    data: [2, 3, 5, 7, 6]
                }, {
                    type: 'column',
                    name: '杭州',
                    data: [4, 3, 3, 9, 0]
                }, {
                    type: 'spline',
                    name: '均线',
                    data: [3, 2.67, 3, 6.33, 3.33],
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[3],
                        fillColor: 'white'
                    }
                }, {
                    type: 'pie',
                    name: '总访问量',
                    data: [{
                        name: '北京',
                        y: 13,
                        color: Highcharts.getOptions().colors[0]
                    }, {
                        name: '上海',
                        y: 23,
                        color: Highcharts.getOptions().colors[1]
                    }, {
                        name: '杭州',
                        y: 19,
                        color: Highcharts.getOptions().colors[2]
                    }],
                    center: [100, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
              }
           ];     
              
           var json = {};   
           json.title = title;   
           json.xAxis = xAxis;
           json.labels = labels;  
           json.series = series;
           $('#myChart').highcharts(json);  
        });
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：