高级响应式图表 | JShare

var chart = Highcharts.chart('container', {
		chart: {
				type: 'column'
		},
		title: {
				text: '响应式图表'
		},
		subtitle: {
				text: '响应式切换位置和样式'
		},
		legend: {
				align: 'right',
				verticalAlign: 'middle',
				layout: 'vertical'
		},
		xAxis: {
				categories: ['苹果', '橘子', '香蕉'],
				labels: {
						x: -10
				}
		},
		yAxis: {
				allowDecimals: false,
				title: {
						text: '金额'
				}
		},
		series: [{
				name: '圣诞平安夜',
				data: [1, 4, 3]
		}, {
				name: '圣诞节晚餐前一天',
				data: [6, 4, 2]
		}, {
				name: '圣诞节晚餐后一天',
				data: [8, 4, 3]
		}],
		responsive: {
				rules: [{
						condition: {
								maxWidth: 500
						},
						chartOptions: {
								legend: {
										align: 'center',
										verticalAlign: 'bottom',
										layout: 'horizontal'
								},
								yAxis: {
										labels: {
												align: 'left',
												x: 0,
												y: -5
										},
										title: {
												text: null
										}
								},
								subtitle: {
										text: null
								},
								credits: {
										enabled: false
								}
						}
				}]
		}
});
function setSize(width) {
		chart.setSize(width, 300);
}

<div id="container"></div>
<button id="large" onclick="setSize(800)">设置宽度为 800px</button>
<button id="small" onclick="setSize(400)">设置宽度为 400px</button>

#container {
		height: 300px;
		min-width: 310px;
		max-width: 800px;
}

{"doctype":1,"resouces":"3,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

高级响应式图表 | JShare

模板（查看所有模板）