hicharts 3D柱状图

来源：互联网发布：建站abc登录编辑：程序博客网时间：2024/05/17 12:53
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>用水量3D柱状图</title><script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript">            $(function () {                var chart = new Highcharts.Chart({                  //$('#container').highcharts({                    chart: {                        renderTo: 'container',                        type: 'column',                        margin: 75,                        options3d: {                        enabled: true,                        alpha: 5,//上下倾斜角度                        beta: 25,//左右倾斜角度                        depth: 70,//深度                        frame: {//3D墙背景                            bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },                            back: { size: 1, color: 'rgba(0,0,0,0.04)' },                            side: { size: 1, color: 'rgba(0,0,0,0.06)' }                        }                    }                    },credits:{                        enabled:false // 禁用版权信息                    },                    title: {//主标题                        text: '每月用水量统计'                    },                    subtitle: {//副标题                        text: '按楼统计每月用水量'                    },                    plotOptions: {//为每个节点显示值                        column: {                            depth: 25                        }                    },                    xAxis: {                        categories: ['2015-08','2015-09','2015-10','2015-11','2015-12']//Highcharts.getOptions().lang.shortMonths                    },                    yAxis: {                        title:{                            text:'用水量(m³)'                        },                        // labels: {//格式化纵坐标的显示风格                        //     formatter: function() {                        //         return this.value ;                        //     }                        // },                        opposite: false//反转                    },                    legend: {//是否显示底注                        enabled: false                    },                    series: [{//图表数值                        name: '用水量(m³)',                            //colorByPoint: true, //为每个柱子显示不同颜色                        data: [2,4]                    }                    // ,{                    //     name: '数量',                    //     data: [2, 3, null, 4, 0 ]                    // }                    ],                     tooltip: {                         shared: true,//节点数据框共享                        /*                            enabled: true,//每个节点显示数据框                          formatter: function() {//格式化每个节点数据框                            return '<b>'+ this.x +'</b><br>'+ this.series.name +': '+ this.y;                          }                        */                    },                    /*                    plotOptions: {//为每个节点显示值                        column: {                            dataLabels: {                            enabled: true                            },                            enableMouseTracking: true                        },                    },                    */                    });                                    // Add mouse events for rotation                $(chart.container).bind('mousedown.hc touchstart.hc', function (e) {                    e = chart.pointer.normalize(e);                    var posX = e.pageX,                      posY = e.pageY,                      alpha = chart.options.chart.options3d.alpha,                      beta = chart.options.chart.options3d.beta,                      newAlpha,                      newBeta,                      sensitivity = 5; // lower is more sensitive                    $(document).bind({                      'mousemove.hc touchdrag.hc': function (e) {                        // Run beta                        newBeta = beta + (posX - e.pageX) / sensitivity;                        newBeta = Math.min(100, Math.max(-100, newBeta));                        chart.options.chart.options3d.beta = newBeta;                        // Run alpha                        newAlpha = alpha + (e.pageY - posY) / sensitivity;                        newAlpha = Math.min(100, Math.max(-100, newAlpha));                        chart.options.chart.options3d.alpha = newAlpha;                        chart.redraw(false);                      },                                                  'mouseup touchend': function () {                         $(document).unbind('.hc');                      }                    });                });            });</script></head><body>        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>        <script type="text/javascript" src="exporting.js"></script>        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>        <div id="container" style="min-width:700px;height:400px"></div></body></html>
0 0