highcharts 生成图表

最新推荐文章于 2020-07-16 16:48:11 发布

烟花三月孤帆远影

最新推荐文章于 2020-07-16 16:48:11 发布

阅读量171

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_47678857/article/details/106406759

版权

本文介绍了如何利用Highcharts库生成各种类型的图表，包括配置、数据处理和样式定制等方面。

摘要由CSDN通过智能技术生成

highcharts 生成图表

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="height: 400px"></div>
        <script src="demo.js"></script>
    </body>
</html>

var chart = Highcharts.chart('container',{
		chart: {
				type: 'column',
				margin: 75,
				options3d: {
						enabled: true,
						alpha: 10,
						beta: 25,
						depth: 70,
						viewDistance: 100,      // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
						frame: {                // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
								// 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
								// side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
								bottom: {
										size: 10
								},
								side: {
										size: 1,
										color: 'transparent'
								},
								back: {
										size: 1,
										color: 'transparent'
								}
						}
				},
		},
		title: {
				text: '包含空值的3D柱状图'
		},
		subtitle: {
				text: '请注意值为 0 和 null 的区别'
		},
		plotOptions: {
				column: {
						depth: 25
				}
		},
		xAxis: {
				categories: Highcharts.getOptions().lang.shortMonths
		},
		yAxis: {
				title: {
						text: null
				}
		},
		series: [{
				name: '销售',
				data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
		}]
});