<!DOCTYPE>
<html lang='en'>
<head>
<title>2-Highcharts 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.
            margin:45,
            //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:{
                depth:25
            }

        },

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

        /*************数据提示框**********************/
        //tooltip: { valueSuffix: '°C' },
        tooltip: {

        },

        /************图例***************/
        //省略图例会在下面显示
        //也可以设置 设置在下方
        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]

            }
        ]

    });

    /*
    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>

2-Highcharts 3D图之3D柱状图带可调试倾斜角度的更多相关文章

  1. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...

  2. 4-Highcharts 3D图之3D普通饼图

    <!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title& ...

  3. 1-Highcharts 3D图之普通3D柱状图与带空值

    <!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...

  4. 自制裸眼3D图【推荐】

    Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...

  5. 用ChemDraw画3D图的方法

    在绘制化学图形的时候,很多的用户都会发现很多的图形都是三维的,这个时候就需要找一款能够绘制3D图形的化学绘图软件.ChemOffice 15.1是最新的化学绘图工具套件,总共有三个组件,其中ChemD ...

  6. 图数据 3D 可视化在 Explorer 中的应用

    本文首发于 NebulaGraph 公众号 前言图数据可视化是现代 Web 可视化技术中比较常见的一种展示方式,NebulaGraph Explorer 作为基于 NebulaGraph 的可视化产品 ...

  7. 物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课

    写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是 ...

  8. 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

    开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...

  9. 多比Web 3D展示（3D机房/3D监控）中间件多比Web 3D展示（3D机房/3D监控）中间件免费下载购买地址

    多比3D是实现3D场景搭建的软件开发包,可以创建广泛的3D应用,适用于高端制造.能源.国防军工.教育科研.城市规划及建筑环艺.生物医学等领域的虚拟仿真,应用于虚拟展示.虚拟设计.方案评审.虚拟装配.虚 ...

随机推荐

  1. wampserver php多版本5.2--5.6和apche2.2/2.4

    一.准备 wampserver2.5 php5各版本 php5.2到php5.6 apache2.2和apache2.4 二.安装 先成功安装wampserver2.5,如果安装不成功,多是vc11没 ...

  2. 二，CentOS minimal 网络配置及用yum安装所需软件

    CentOS minimal在刚安装完成后,ifconfig一下没发现网卡,是因为使用最小安装的网卡默认没启动,设置配置文件很简单,如下: 1.打开配置文件 vi /etc/sysconfig/net ...

  3. js8月-4号，,思想

    1.js使用观察者模式,做异步编程.面向事件编程. 2.事件执行 (1)用户触发事件(2)定时执行 作业:选项卡,导航栏.

  4. delphi 基础之四 delphi 组织结构

    delphi 组织结构 在Delphi中,一个正在开发的应用程序可以被称作项目或者工程.一般地,一个项目主要由dpr(项目).pas(单元)和dfm(窗体)三种文件组成,另外还有一些附属文件,如res ...

  5. DevExpress LookUpEdit和ComboBoxEdit部分用法

    LookUpEdit 1.绑定列 (注意点:LookUpEdit1的FieldName要和绑定的列明一致) 方式一: LookUpEdit1.Properties.DisplayMember = &q ...

  6. 对java面试文章的技术漫谈的C#技术理解

    .NET人技术太菜的话,要好好学习啊,所以看到Java届的面试对话文章,不经意想用C#的知识想做一些回应(其实也没有什么了不起的). 楼下知识文章扩展一览,外加自己接触到的扩展.水太深! static ...

  7. clojure

    ide http://updatesite.ccw-ide.org/stable https://cursiveclojure.com/ http://web.clojurerepl.com/ htt ...

  8. 文件系统 第八次迭代 VFS相关说明

    麻烦访问evernote链接 http://www.evernote.com/shard/s133/sh/53e5b5ac-1192-4910-8bd5-6886218562af/59516c32a5 ...

  9. EMVTag系列9《卡片管理数据》

    Ø  5F30    服务码 F: n 3 T: 5F30 L: 2 -O(可选):可选数据元 按GB/T 17552标准,卡片中的服务码(5F30) 的值,要和二磁道等效数据57中的服务码的值完全一 ...

  10. SQL0294N 容器已在使用中。 SQLSTATE=42730

    在建立数据库后,建立表空间时,出现如下错误: CREATE TABLESPACE TABLESAPCE_NAME PAGESIZE 32K MANAGED BY SYSTEM USING ('E:\D ...