highcharts-画复合图

1、demo1 复合指标图
<html>
<head>
	<meta name="viewport" content="width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/highcharts.js"></script>
	
	<script>
		$(document).ready(function() {
			//一天24小时数组
			var mycars=new Array();
			for(var i = 0;i < 24; i++) {
				mycars[i] = i+":00-" + (i+1) + ":00" ;
			}
	
			
			//traffic(客流量)
			var traffic_data = eval("[20, 34, 59, 26, 54, 56, 42, 38, 47, 59, 75, 12, 23, 59, 109, 0, 55, 452, 75, 236, 14, 44, 2, 8]");
			

			//销售额
			var cumulative_sales_data = eval("[420, 758, 594, 366, 459, 252, 446, 381, 417, 549, 715, 112, 231, 591, 149, 145, 505, 125, 715, 276, 140, 414, 241, 801]");
			

			//traget Sales(目标销售额)
			var target_cumulative_sale_data = eval("[411, 525, 424, 452, 445, 441, 774, 568, 147, 414, 444, 222, 478, 145, 758, 414, 444, 789, 236, 456, 257, 478, 412, 236]");
			
			
			$("#container2").highcharts({
		        chart: {
		            zoomType: 'xy',
		            height: 465,
		            marginBottom: 130,
		            resetZoomButton: {
		                position: {
		                    align: 'center',
		                    y: 400
		                },
		                relativeTo: 'chart'
		            }
		        },
		        legend: {
		            align: 'center',
		            verticalAlign: 'bottom',
		            y: 10
		        },
		        title: {
		            text: '实时报表',
		            style: {
		                color: '#89A54E',
		                fontWeight: 'bold'
		            }
		        },
		        xAxis: [{
		        	title: {text: '实时报表/时'},
		            gridLineWidth: 1,
		            categories: mycars			//显示x轴数据的数组
		            
		        }],
		        yAxis: [{
		            gridLineWidth: 0,
		            title: {
		                text: 'SALES',
		                style: {
		                    color: '#000'
		                }
		            },
		            labels: {
		                formatter: function() {
		                    return '$' + this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.00';
		                },
		                style: {
		                    color: '#000',
		                    fontWeight: 'bold'
		                }
		            },
		            opposite: true,
		            min: 0

		        },
		        {
		            labels: {
		                formatter: function() {
		                    return this.value;
		                },
		                style: {
		                    color: '#000',
		                    fontWeight: 'bold'
		                }
		            },
		            title: {
		                text: 'TRAFFIC',
		                style: {
		                    color: '#000',
		                    fontWeight: 'bold'
		                }
		            },
		            min: 0,
		            gridLineWidth: 0
		        }],
		        tooltip: {
		            shared: true
		        },
		        series: [{
		            name: '销售额',
		            color: '#89A54E',
		            type: 'spline',
		            marker: {
		                enabled: false
		            },
		            data: cumulative_sales_data,
		            tooltip: {
		                valuePrefix: '$'
		            }
		        },
		        {
		        	name: 'Target Sales',
		            type: 'spline',
		            color: '#7a7a7a',
		            marker: {
		                enabled: false
		            },
		            data: target_cumulative_sale_data,
		            tooltip: {
		                valuePrefix: '$'
		            }
		        },
		        {
		            name: 'Traffic',
		            color: '#4572A7',
		            type: 'spline',

		            marker: {
		                enabled: false
		            },
		            yAxis: 1,
		            data: traffic_data,
		            tooltip: {
		                valueSuffix: ''
		            }
		        }],
		        lang: {
		            noData: '没有可用数据。'
		        }
		    });
		});
	</script>
</head>
<body scroll="auto">
	<div id="container2"></div>			
</body>
</html>
highcharts-画复合图

猜你喜欢
