文档章节

分想下用highcharts制作的3d饼图

咲晚杍
 咲晚杍
发布于 2014/05/06 13:50
字数 263
阅读 5224
收藏 4

hightcharts升级4.0之后支持3D了,应该算是一件大事,网上有人已经做了些3D图表,分享下。

首先,需要说明hightcharts 4支持原生3d图,如果,你要做好效果的3d,建议下载最新的4版本。这是基础。

其次,3d饼图,需要在plotOptions中设置深度属性:

就是这样一句,设置为25:

plotOptions.pie.depth: 25

准备工作完了,我们开始制作3D饼图。

步骤一:按照老规矩,写入highcharts必要的JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>

步骤二:

我们为图表设定一个大小,高度为400px,用div将它包围,然后设置一个id为container,方便下面的js:

<div id="container" style="height: 400px"></div>

步骤三

填入js代码:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
				enabled: true,
                alpha: 45,
                beta: 0,
            }
        },
        plotOptions: {
            pie: {
                depth: 25
            }
        },
        series: [{
            data: [2, 4, 6, 1, 3]
        }]
    });
});

下面是代码和效果图:

highcharts 3D饼图代码

highcharts 3D饼图

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文为问答:如何用highcharts制作3d图?

本文转载自:http://www.evget.com/question/2616

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
加载中

评论(2)

silence_changing
silence_changing
找到了吗
unosyy
unosyy
额 我没找到highcharts4.0的下载地方。
图表配置(Chart)

一、图表容器 Highcharts 实例化中绑定容器的方式有两种 1、通过 dom 调用 highcharts() 函数的方式 2、通过 chart.renderTo 来指定 二、图表样式 1、宽度、高度 Highcharts 图表的高度和宽度...

北國丶江山
2016/09/14
16
0
网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts 第1章 认识Highcharts Highcharts是国际知名的一款图表插件。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员可以很轻松地构建出...

大学霸
2015/05/27
0
0
NEV与其他图表引擎的横向对比

本文由 网易云 发布 作者:刘阳 本篇文章仅限内部分享,如需转载,请联系网易获取授权。 NEV与其他图表引擎的横向对比 对比的其他图表库包括vega、HighCharts、 ECharts以及G2 图表类型 柱状...

wangyiyungw
2018/05/14
0
0
highcharts 提示框不消失

highcharts 制作饼图,提示框鼠标离开图形,向图形左侧,提示框不消失;向图形右侧,提示框则消失 tooltip配置如下

宿管小阿姨
2017/12/19
136
1
基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀。本篇主要介绍在Web...

walb呀
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

巨杉Tech | 微服务趋势下的数据库设计与应用简析

上周五(7月12日)巨杉数据库参与了由得到App主办八里庄技术沙龙活动,分享主题是关于分布式数据库架构与实战。 以下就是根据巨杉数据库现场分享的内容进行的分享实录整理。 巨杉数据库简介 ...

巨杉数据库
26分钟前
46
0
借助URLOS快速安装AliSQL

环境需求 最低硬件配置:1核CPU,1G内存(1+1)提示:如果你的应用较多,而主机节点的硬件配置较低,建议在部署节点时开通虚拟虚拟内存; 生产环境建议使用2G或以上内存; 推荐安装系统:Ubu...

躲猫猫_007
27分钟前
0
0
DM 源码阅读系列文章(九)shard DDL 与 checkpoint 机制的实现

作者:张学程 本文为 DM 源码阅读系列文章的第九篇,在 上篇文章 中我们详细介绍了 DM 对 online schema change 方案的同步支持,对 online schema change 同步方案以及实现细节等逻辑进行了...

TiDB
30分钟前
2
0
mysql指令

mysql指令 连接数据库 mysql -h 127.0.0.1 -u root -p -h : 数据库地址 -u : 用户名 -p : 密码 显示所有数据库 show databases; //显示所有数据库use XXX; //使用指定数据库show t...

xiaobai1315
33分钟前
0
0
C++STL常见面试题

1.C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作。vector封装数组,...

shzwork
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部