<!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. 使用maven, myeclipse工具构建spring mvc项目

    一.使用myeclipse 创建一个新的 maven项目. (ps:1.在filter过滤的时候输入 webapp 选择"maven-archetype-webapp". 2.在m ...

  2. Thinkphp 下面执行crond

    thinkphp开启cli支持  1.tp正好支持cli命令模式,手册的路径为13.7.4 如果是用的其他框架不支持cli,那么只能直接写程序了,其实就是写面向过程的最基础的php代码. 2.在入口文 ...

  3. Qt使用默认浏览器打开网页

    #include <QDesktopServices> #include <QUrl> QDesktopServices::openUrl(QUrl("http:// ...

  4. js 将json字符串转换为json兑现

    在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ &quo ...

  5. ajax向前台输出二维数组 并解析

    最近在弄一个售后数据统计的功能,里边需要统计特定时期内各种客户.机型的分布比例,单单table来计算并显示很死板(一点也不酷) 于是决定用jquery插件flot并通过ajax传输数据 :flot的折 ...

  6. Mongodb的索引--学习笔记（未完）

    全文索引 建立方法: --在articles集合的key字段上创建全文索引 db.articles.ensureIndex({key:"text"}) --在articles集合的 ...

  7. linux 修改系统时间

    首先进入/proc/sys/xen,执行以下命令 [root@test]#cd   /proc/sys/xen[root@test]#echo 1 > independent_wallclock ...

  8. 《高性能javascript》读书笔记：P1减少跨作用域的变量访问

    前端优化,有两个意义:1.为了让用户在浏览网页时获得更好的体验 2.降低服务器端的访问压力,节省网络流量. 除了换个好主机连上个千兆网这样的硬件问题,优化部分的实现方式目前也大致两种,一种是页面级别的 ...

  9. EmguCV学习——简单使用

    关于EmguCV我就不多说了,是对应于OpenCV的一套net库. 公司是视觉方面的业务,我又不会c++(好想会啊,正在学习中).由于各种需求,自己觉得对c++不是特别感冒,所以选用了net下的ope ...

  10. outlook配置

    有时打开outlook报错.步骤如下: 一.打开控制面板-邮件-电子邮件账户-新建 二.具体设置如下: 三.点第二步上的“其他设置(M)”.做发送服务器.