hightchart標題變化，哇嘎嘎

時間 2019-11-25

標籤 hightchart 標題變化嘎嘎简体版

原文原文鏈接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
       <title>請假統計</title>
       <link rel="stylesheet" type="text/css"   href="../../css/vacate/weui.css" />
       <link rel="stylesheet" type="text/css"   href="../../css/vacate/weiui_expand.css" />
   </head>
   <body>
       
       <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

       </div>javascript

       <script src="../../js/vacateCount/zepto.min.js"></script>
       <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
       <script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
       <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
       <script type="text/javascript">
           $(function () {
           Highcharts.chart('container', {

           chart: {
           type: 'column',
           events:{

               drillup: function(e) {
           // 上鑽回調事件
           this.title.update({
       text:"2016年1月-5月，病假統計"
       });
           },
               drilldown:function(e){
                   var chart = this,
                   drilldowns = {
   '一月份':{
                       name: '一月份',
                       id: 'one',
                       data: [
                       [
                       '呼吸道',
                       6
                       ],
                       [
                       '消化道',
                       7
                       ],
                       [
                       '其餘',
                       7
                       ]

                       ]
                       },
                       '二月份':{
                       name: '二月份',
                       id: 'two',
                       data: [
                       [
                       '呼吸道',
                       15
                       ],
                       [
                       '消化道',
                       8
                       ],
                       [
                       '其餘',
                       7
                       ]
                       ]
                       },
                       '三月份':{
                       name: '三月份',
                       id: 'three',
                       data: [
                       [
                       '呼吸道',
                       5
                       ],
                       [
                       '消化道',
                       3
                       ],
                       [
                       '其餘',
                       2
                       ]
                       ]
                       },
                       '四月份':{
                       name: '四月份',
                       id: 'four',
                       data: [
                       [
                       '呼吸道',
                       5
                       ],
                       [
                       '消化道',
                       10
                       ],
                       [
                       '其餘',
                       15
                       ]
                       ]
                       },
                       '五月份':{
                       name: '五月份',
                       id: 'five',
                       data: [
                       [
                       '呼吸道',
                       5
                       ],
                       [
                       '消化道',
                       6
                       ],
                       [
                       '其餘',
                       3
                       ]
                       ]
                       }
   },
       series = drilldowns[e.point.name];
       chart.title.update({
       text:series.name+"病假詳情",
       });
       chart.addSeriesAsDrilldown(e.point, series);
                  }
           }
           },
           title: {
           text: '2016年1月-5月，病假統計'
           },
           xAxis: {
           type: 'category'
           },
           yAxis: {
           title: {
           text: '總的請假人數'
           }
           },
           legend: {
           enabled: false
           },
           plotOptions: {
           series: {
           borderWidth: 0,
           dataLabels: {
           enabled: true,
           format: '{point.y}'
           }
           }
           },
           tooltip: {
           headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
           pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}人</b> of total<br/>'
           },
           series: [{
           name: '統計',
           colorByPoint: true,
           data: [{
           name: '一月份',
           y: 20,
           drilldown: true
           }, {
           name: '二月份',
           y: 30,
           drilldown: true
           }, {
           name: '三月份',
           y: 10,
           drilldown: true
           },{
           name: '四月份',
           y: 25,
           drilldown: true
           },{
           name: '五月份',
           y: 14,
           drilldown: true
           }]
           }],
           drilldown: {
           series: []
           }
           });



           });

       </script>
   </body>
</html>
css

相關文章

相關標籤/搜索

PHP 7 新特性

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<