<!DOCTYPE>
<html lang='en'>
<head>
<title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主题   -->

<script>
$(function () {
    var chart = new Highcharts.Chart({ 

        chart:{
            renderTo:'container',//图表描绘出后放到页面的某一具体位置
            type:'column',
            //边距是指图表的外边与图形区域之间的距离，数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
            marginTop:80,
            marginRight:40,
            //3D图像设置项。3D效果需要引入highcharts-3d.js，下载或者在线路径为code.highcharts.com/highcharts-3d.js.
            options3d:{
                enabled:true,//画图表是否启用3D函数，默认值为：false
                alpha:10,//3D图旋转角度，此为α角，内旋角度默认为0
                beta:25,//3D图旋转角度，此为β角，外旋角度 默认为0
                //图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
                //默认是： 100
                depth:70,
                viewDistance: 25//它定义了观看者在图前看图的距离，它是非常重要的对于计算角度影响在柱图和散列图，此值不能用于3D的饼图，默认值为100
            }

        },

        /************标题***************/
        //标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
        //主标图
        title: {
            text:'我的3D图'

        },
        //副标题
        subtitle: { 

        },

        //plotOptions用于设置图表中的数据点相关属性。
        plotOptions: {
            column:{
                // 是否将每个系列的值叠加在彼此的顶部上。
                stacking: 'normal',
                depth:25
            }

        },

        /************坐标轴***************/
        //所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
        //（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
        xAxis: {
            //获取月份的简称
            //categories: Highcharts.getOptions().lang.shortMonths
            categories:['A','B','C','D','E']
        },
        yAxis: {
            //是否在正常显示的对立面显示轴。
            //正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
            //opposite: true
        },

        /*************版权信息**********************/
        credits:{
             enabled:false // 禁用版权信息
        },

        /*************数据提示框**********************/
        //tooltip: { valueSuffix: '°C' },
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },

        /************图例***************/
        //省略图例会在下面显示
        //也可以设置 设置在下方
        legend: {
            //layout: 'horizontal',//horizontal,vertical
            //align: 'center',
            //verticalAlign: 'bottom',
            //borderWidth: 0
            //enabled:false//关闭图例
        }, 

        /*****************数据列******************/
        /*
        series: [
            {
                name: 'Sales',
                //data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
                //如果有个值为空的话，只需设为null
                data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]

            }
        ]*/
         series: [{
            name: 'AA',
            data: [5, 3, 4, 7, 2],
            //此选项允许在堆叠图表中的分组系列。堆栈选项可以是一个字符串或一个数字或其他任何东西，只要分组的系列“堆栈选项”相互匹配。
            stack: '1'
        }, {
            name: 'BB',
            data: [3, 4, 4, 2, 5],
            stack: '1'
        }, {
            name: 'CC',
            data: [2, 5, 6, 2, 1],
            stack: '2'
        }, {
            name: 'CC',
            data: [3, 0, 4, 4, 3],
            stack: '2'
        }]

    });

    /*
    chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart rotation demo'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    */

    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();

});
</script>

</head>

<body>
<div id="container" style="min-width:700px;height:400px"></div>

<!-- 调节部分 -->
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
    <table>
        <tr>
            <td>Alpha Angle</td><!-- 内旋角 -->
            <td>
                <input id="R0" type="range" min="0" max="45" value="15"/>
                <span id="R0-value" class="value"></span>
            </td>
        </tr>
        <tr>
            <td>Beta Angle</td><!-- 外旋角 -->
            <td>
                <input id="R1" type="range" min="0" max="45" value="15"/>
                <span id="R1-value" class="value"></span>
            </td>
        </tr>
    </table>
</div>
</body>

</html>

<!DOCTYPE>
<html lang='en'>
<head>
<title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主题   -->

<script>
$(function () {
    var chart = new Highcharts.Chart({
        
        chart:{
            renderTo:'container',//图表描绘出后放到页面的某一具体位置
            type:'column',
            //边距是指图表的外边与图形区域之间的距离，数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
            marginTop:80,
            marginRight:40,
            //3D图像设置项。3D效果需要引入highcharts-3d.js，下载或者在线路径为code.highcharts.com/highcharts-3d.js.
            options3d:{
                enabled:true,//画图表是否启用3D函数，默认值为：false
                alpha:10,//3D图旋转角度，此为α角，内旋角度默认为0
                beta:25,//3D图旋转角度，此为β角，外旋角度 默认为0
                //图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
                //默认是： 100
                depth:70,
                viewDistance: 25//它定义了观看者在图前看图的距离，它是非常重要的对于计算角度影响在柱图和散列图，此值不能用于3D的饼图，默认值为100
            }
            
        },
        
        
        /************标题***************/
        //标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
        //主标图
        title: {
            text:'我的3D图'
            
        },
        //副标题
        subtitle: {
            
        },
        
        
        //plotOptions用于设置图表中的数据点相关属性。
        plotOptions: {
            column:{
                // 是否将每个系列的值叠加在彼此的顶部上。
                stacking: 'normal',
                depth:25
            }
            
        },
        
        /************坐标轴***************/
        //所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
        //（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
        xAxis: {
            //获取月份的简称
            //categories: Highcharts.getOptions().lang.shortMonths
            categories:['A','B','C','D','E']
        },
        yAxis: {
            //是否在正常显示的对立面显示轴。
            //正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
            //opposite: true
        },
        
        /*************版权信息**********************/
        credits:{
             enabled:false // 禁用版权信息
        },
        
        /*************数据提示框**********************/
        //tooltip: { valueSuffix: '°C' },
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },
        
        
        
        /************图例***************/
        //省略图例会在下面显示
        //也可以设置 设置在下方
        legend: {
            //layout: 'horizontal',//horizontal,vertical
            //align: 'center',
            //verticalAlign: 'bottom',
            //borderWidth: 0
            //enabled:false//关闭图例
        },
        
        
        /*****************数据列******************/
        /*
        series: [
            {
                name: 'Sales',
                //data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
                //如果有个值为空的话，只需设为null
                data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]
                
            }
        ]*/
         series: [{
            name: 'AA',
            data: [5, 3, 4, 7, 2],
            //此选项允许在堆叠图表中的分组系列。堆栈选项可以是一个字符串或一个数字或其他任何东西，只要分组的系列“堆栈选项”相互匹配。
            stack: '1'
        }, {
            name: 'BB',
            data: [3, 4, 4, 2, 5],
            stack: '1'
        }, {
            name: 'CC',
            data: [2, 5, 6, 2, 1],
            stack: '2'
        }, {
            name: 'CC',
            data: [3, 0, 4, 4, 3],
            stack: '2'
        }]

});
    
    /*
    chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart rotation demo'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    */
    
    
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
    
    
});
</script>

</head>

<body>
<div id="container" style="min-width:700px;height:400px"></div>

<!-- 调节部分 -->
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
    <table>
        <tr>
            <td>Alpha Angle</td><!-- 内旋角 -->
            <td>
                <input id="R0" type="range" min="0" max="45" value="15"/>
                <span id="R0-value" class="value"></span>
            </td>
        </tr>
        <tr>
            <td>Beta Angle</td><!-- 外旋角 -->
            <td>
                <input id="R1" type="range" min="0" max="45" value="15"/>
                <span id="R1-value" class="value"></span>
            </td>
        </tr>
    </table>
</div>
</body>

</html>

3-Highcharts 3D图之3D柱状图分组叠堆3D图的更多相关文章

  1. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

  2. C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图

    C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图 +BIT祝威+悄悄在此留下版了个权的信息说: 最近需要用OpenGL绘制文字,这是个很费时费力的事.一般的思路就是 ...

  3. 3D游戏图形技术解析(7)——视差映射贴图（Parallax Mapping）【转】

    http://www.cnblogs.com/taotaobujue/articles/2781371.html 视差映射贴图(Parallax Mapping) ● 传统纹理贴图的弊端 纹理贴图大家 ...

  4. 从3D Studio Max导入物体 Importing Objects From 3D Studio Max

    原地址:http://game.ceeger.com/Manual/HOWTO-ImportObjectMax.html If you make your 3D objects in 3dsMax, ...

  5. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  6. FusionCharts，双折线图和双柱状图

    一个电商项目中,用到了"双柱状图",对比 当前库存和累计库存. 网上找了好几个贴子,才找到具体用法. 代码整理下,以备不时之需. 效果图-双折线图 效果图-双柱状图 <%@ ...

  7. cacti气象图调整（批量位置调整、更改生成图大小等）

    cacti气象图能够非常直观的看到各个节点的流量.这里用的是CactiEZ中文版 V10 1.调整气象图大小 默认有一个1024像素的背景图可选, 这里我们须要新增一个1600像素的背景图. 背景图自 ...

  8. 从图(Graph)到图卷积(Graph Convolution)：漫谈图神经网络模型 (二)

    本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...

  9. 从图(Graph)到图卷积(Graph Convolution)：漫谈图神经网络模型 (一)

    本文属于图神经网络的系列文章,文章目录如下: 从图(Graph)到图卷积(Graph Convolution):漫谈图神经网络模型 (一) 从图(Graph)到图卷积(Graph Convolutio ...

随机推荐

  1. php 购物车的例子

    网上搜到的,简单容易理解.cookie存购物车ID,db存购物车数据. //购物车session的产生代码   1 if(! $session && ! $scid) {    2 / ...

  2. 在xml中调用自己用java代码定义的View

    1.在res中new一个class继承view.View,重写ondraw方法,写出自己的view package com.zzw.myView; import android.content.Con ...

  3. ASP.NET 5概观 （ASP.NET 5 Overview）

    http://www.asp.net/vnext/overview/aspnet-vnext/aspnet-5-overview ASP.NET 5概观(ASP.NET 5 Overview) 原作: ...

  4. Windows 上如何安装Sqlite(转载)

    1.获得命令行程序 SQLite命令行程序(CLP)是开始使用SQLite的最好选择,按照如下步骤获取CLP: 1).打开浏览器进入SQLite主页,   www.sqlite.org. 2).单击页 ...

  5. JLINK V8 Keil MDK4.10 STM32

    新买的JLINK v8仿真器,第一次使用,编译环境是Keil MDK4.10,目前芯片是STM32F103x. 按照光盘的说明先安装了驱动,USB接上JLINK v8,显示驱动成功.但是在debug或 ...

  6. 快速同步mysql数据到redis中

    MYSQL快速同步数据到Redis 举例场景:存储游戏玩家的任务数据,游戏服务器启动时将mysql中玩家的数据同步到redis中. 从MySQL中将数据导入到Redis的Hash结构中.当然,最直接的 ...

  7. Redbean：入门(一) - 增删改查

    <?php require_once 'rb.php'; $tableName = "link"; //链接数据库 R::setup("mysql:host=loc ...

  8. 快速的搭建JFinal的ORM框架示例

    JFinal默认用的是Freemarker作为视图. 所以,打架还是准备好俩个jar包吧! freemarker-2.3.16.jar JFinal-bin-1.5.jar 新建web工程和添加lib ...

  9. 安装RubyMine

    在mac上安装RubyMine的方法: 1.运行 brew cask install rubymine  自动安装. 2.按提示安装java更新． 3.RubyMine注册码: name: rubym ...

  10. Knockout.Js学习目录

    1.Knockout.Js(简介) 2.Knockout.Js(监控属性Observables) 3.Knockout.Js(属性绑定) 4.Knockout.Js(事件绑定) 5.Knockout. ...