highcharts绘制3D图表

来源：互联网发布：汇编怎么写网络程序编辑：程序博客网时间：2024/06/04 18:49

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

一、基本介绍

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

二、绘制一个饼图的

1、效果图如下

2、具体代码

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">    <meta name="viewport" content="width=device-width, initial-scale=1">    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>    <!--3d图表需要的2d就不需要-->    <script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>    <!-- <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script> -->    <!-- <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->    <!-- 颜色的可以不引入,单独自己设置颜色 -->    <!-- <script src="https://img.hcharts.cn/highcharts/themes/sand-signika.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>

阅读全文

0 0