Highcharts 的画图使用

最新推荐文章于 2020-06-25 07:27:33 发布

原创最新推荐文章于 2020-06-25 07:27:33 发布 · 702 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #web

本文介绍了如何使用Highcharts第三方库在Web应用中创建图表。通过HTML代码示例展示了如何传递数据数组来生成图表。

先说实现的效果：

使用第三方的框架highcharts实现：

html中实现的代码：

<div class="row">
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div id="container"></div>
	</div>
</div>

js中实现的代码：

onDrawChart: function(orderList) {
			
			 $('#container').highcharts({
			        chart: {
			            type: 'column'
			        },
			        lang:{
			        	downloadJPEG: "下载JPEG 图片",
			            downloadPDF: "下载PDF文档",
			            downloadPNG: "下载PNG 图片",
			            downloadSVG: "下载SVG 矢量图",
			            printChart: "打印图片",
			            exportButtonTitle: "导出图片"
			        },
			        title: {
			            text: '订单平台运营分析'
			        },
			        subtitle : {
						text : "副标题"
					},
			        xAxis: {
			        	categories: ”“
			        },
			        yAxis : {
						title : {
							text : '金额'
						}
					},
			        credits: {
			            enabled: false
			        },
			        series: [{
			            name: '应收金额（元）',
			            data: amount_due
			        }, {
			            name: '应付金额（元）',
			            data: amounts_payable
			        }, {
			            name: '盈利（元）',
			            data: profit
			        }]
			    });
		}
	};

credits: { enabled: false } 是否显示版权信息默认是：true.

series是我们需要传的数据，数据是数组。