免费注册个人网站不花钱,字体WordPress,清远做网站公司,合肥网络推广网络运营最近做项目中需求要求3D图表展现,开始比较懵逼,后来网上找的了highcharts图表,之前都是用的百度的echarts做平面图 一、基本介绍
1、3d官网案例2、参数的配置3、官方的其他案例
二、绘制一个饼图的
1、效果图如下 2、具体代码 !DOCTYPE HTML
html
head!DOCTYPE HTML
html
headmeta charsetutf-8link relicon hrefhttps://static.jianshukeji.com/highcharts/images/favicon.icometa nameviewport contentwidthdevice-width, initial-scale1script srchttps://img.hcharts.cn/jquery/jquery-1.8.3.min.js/scriptscript srchttps://img.hcharts.cn/highcharts/highcharts.js/script!--3d图表需要的2d就不需要--script srchttps://img.hcharts.cn/highcharts/highcharts-3d.js/script!-- script srchttps://img.hcharts.cn/highcharts/modules/exporting.js/script --!-- script srchttps://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js/script --!-- 颜色的可以不引入,单独自己设置颜色 --!-- script srchttps://img.hcharts.cn/highcharts/themes/sand-signika.js/script --
/head
bodydiv idcontainer styleheight: 400px;width:400px;/divscript$(function () {$(#container).highcharts({chart: {backgroundColor:#e5e5e5,type: pie,options3d: {enabled: true,alpha: 45,beta: 0}},// 设置导出按钮exporting:{// 不显示出来enabled:false},title: {text: 2014年某网站不同浏览器访问量占比},tooltip: {pointFormat: {series.name}: b{point.percentage:.1f}%/b},plotOptions: {pie: {allowPointSelect: true,cursor: pointer,depth: 35,dataLabels: {enabled: true,format: {point.name}}}},// 版权credits:{enabled:false},series: [{type: pie,name: 浏览器占比,data: [{name:Firefox,y:25.0,id:fox,color:#630,// 文字提示dataLabels:{enabled:false}},[IE, 26.8],{name: Chrome,y: 12.8,sliced: true,selected: true},[Safari, 8.5],[Opera, 6.2],[Others, 0.7]]}]});});/script
/body
/html
