首页 > 代码库 > highcharts 柱形堆叠图

highcharts 柱形堆叠图

2024-07-04 17:27:09   228人阅读

<!doctype html> 
<html lang="en"> 
    <head> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/exporting.js"></script> 
        <script>
            $(function () {
    $(‘#container‘).highcharts({
        chart:{
            type:‘column‘
        },
    
        xAxis: {
            categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘]
        },
        yAxis: {
            title: {
                text: ‘Temperature (°C)‘
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: ‘#808080‘
            }]
        },
        tooltip: {
            formatter:function(){
                return ‘<b>‘+this.x + ‘</b><br/>‘ + this.series.name + ‘:‘ + this.y + ‘<br/>‘ + ‘Total:‘ + this.point.stackTotal;
            },
            valueSuffix: ‘°C‘
        },
         plotOptions: { 
             column: { 
                 stacking: ‘normal‘, 
                 dataLabels: { enabled: true, 
                              color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || ‘white‘ }
             }
         },
        legend: {
            layout: ‘vertical‘,
            align: ‘right‘,
            verticalAlign: ‘middle‘,
            borderWidth: 0
        },
        series: [{
            name: ‘Tokyo‘,
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
        }, {
            name: ‘New York‘,
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
        }, {
            name: ‘Berlin‘,
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]
        }]
    });
});
                
        </script> 
    </head>
    <body> 
        <div id="container" style="min-width:700px;height:400px"></div> 
    </body>
</html>


联系
我们