highcharts绘制3D图表

编程入门行业动态更新时间:2024-10-10 07:28:09

highcharts绘制3D<a href=https://www.elefans.com/category/jswz/34/1770092.html style= 图表"/>

highcharts绘制3D图表

最近做项目中需求要求3D图表展现,开始比较懵逼,后来网上找的了highcharts图表,之前都是用的百度的echarts做平面图

一、基本介绍

1、3d官网案例
2、参数的配置
3、官方的其他案例

二、绘制一个饼图的

1、效果图如下

2、具体代码

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><link rel="icon" href=".ico"><meta name="viewport" content="width=device-width, initial-scale=1"><script src=".8.3.min.js"></script><script src=".js"></script><!--3d图表需要的2d就不需要--><script src=".js"></script><!-- <script src=".js"></script> --><!-- <script src=".js"></script> --><!-- 颜色的可以不引入,单独自己设置颜色 --><!-- <script src=".js"></script> -->
</head>
<body><div id="container" style="height: 400px;width:400px;"></div><script>$(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>

更多推荐

highcharts绘制3D图表

本文发布于:2023-06-27 19:17:02，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/915799.html