首页 > Web开发 > 详细

highcharts.js的使用 折线图和柱状图一起显示效果

时间:2020-07-06 17:32:06      阅读:213      评论:0      收藏:0      [点我收藏+]
<script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript">
        var chart = Highcharts.chart(‘container‘, {
            title: {
                text: ‘混合图表‘
            },
            xAxis: {
                categories: [‘苹果‘, ‘ 橙‘, ‘梨‘, ‘香蕉‘, ‘李子‘]
            },
            plotOptions: {
                series: {
                    stacking: ‘normal‘
                }
            },
            labels: {
                items: [{
                    html: ‘水果消耗‘,
                    style: {
                        left: ‘100px‘,
                        top: ‘18px‘,
                        color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black‘
                    }
                }]
            },
            series: [{
                type: ‘column‘,
                name: ‘小张‘,
                data: [3, 2, 1, 3, 4],
                showInLegend: false
            }, {
                type: ‘column‘,
                name: ‘小潘‘,
                data: [2, 3, 5, 7, 6],
                showInLegend: false
            }, {
                type: ‘column‘,
                name: ‘小王‘,
                data: [4, 3, 3, 9, 0],
                showInLegend: false
            },{
                type: ‘spline‘,
                name: ‘小张‘,
                data: [3, 2, 1, 3, 4]
            }, {
                type: ‘spline‘,
                name: ‘小潘‘,
                data: [2, 3, 5, 7, 6]
            }, {
                type: ‘spline‘,
                name: ‘小王‘,
                data: [4, 3, 3, 9, 0]
            } ]
        });
    </script>
<div id="container" style="max-width:800px;height:400px"></div>

  技术分享图片

 

highcharts.js的使用 折线图和柱状图一起显示效果

原文:https://www.cnblogs.com/yaoling/p/13255830.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!