Highcharts分页

当数据过多时，通过Highcharts的api增加配置参数legend，自动实现分页展示

1.折线图

html

<div id="h-chart" style="min-width:300px;height:600px"></div>

js

var chart = Highcharts.chart('h-chart', {
	chart: {// 关于图表区和图形区的参数及一般图表通用参数。
		type: 'line'
	},
	title: {// 图表标题。
		text: '爱心'
	},
	subtitle: {// 图表副标题
		text: '爱心有这么多'
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
	},
	legend: {
		layout: 'horizontal', // 图例数据项的布局。布局类型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal.
		align: 'center', // 设定图例在图表区中的水平对齐方式，合法值有left，center 和 right。
		verticalAlign: 'bottom', // 设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置可以通过 y 选项做进一步设定。
		y: 20, // 在竖直对齐的基础上进行竖直方向偏移。当 y 值为负值时，图例往上偏移；正值时，图例往下偏移。 默认是：0.
		x:25, // 在图例水平对齐的基础上进行水平偏移。当ｘ值为负值时，图例往左偏移；正值时，图例往右偏移。 默认是：0.
		maxHeight:60, // 设定图例的最大高度。当超出最大高度，此时图例分页导航将显示。
		navigation: { // 图例分页导航。当图例（高度）溢出时，分页导航就会出现。使用分页导航后，导出的图片就不能显示全部图例。为避免这种情况，可以通过导出时增加图表高度方式规避。
			activeColor: '#39F',// 激活(箭头)颜色。在图例的导航页，激活的分页箭头颜色。 默认是：#003399.
			animation: true, // 设定当点击图例的导航上下按钮时，触发的动画效果。默认效果继承自chart.animation中的设定。额外的属性设置可封装在对象中，此对象包含easing 和 duration。 默认是：true.
			inactiveColor: '#595959', // 设置图例导航按钮未激活颜色。 默认是：#cccccc.
			style: { // 设定图例导航文本样式。
				fontWeight: 'bold',
				color: '#333',
				fontSize: '12px'
			}
		}
	},
	yAxis: {
		title: {
			text: '爱心 (+)'
		}
	},
	plotOptions: {// 数据列配置是针对所有数据列及某种数据列有效的通用配置。
		line: {
			dataLabels: {
				// 开启数据标签
				enabled: true          
			},
			// 关闭鼠标跟踪，对应的提示框、点击事件会失效
			enableMouseTracking: false
		}
	},
	series: [// 
图表的数据列，可以在每个数据列中指定其参数，另外也可以通过数据列配置（ plotOptions） 来指定对某一种类型的数据列有效的配置。
    {
		name: '夏目贵志',
		data: [1.0, 2.7, 5.5, 1.5, 8.6, 11.5, 15.2, 6.5, 13.3, 8.3, 13.9, 29.6]
	}, {
		name: '杀生丸',
		data: [3.9, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 3.6, 16.8]
	}, {
		name: '犬夜叉',
		data: [1.9, 5.2, 7.7, 6.5, 9, 12, 15, 8, 16, 9.3, 6.6, 14.5]
	}, {
		name: '云雀恭弥',
		data: [2.9, 6.2, 7, 1.5, 8.6, 11.5, 15.2, 6.5, 13.3, 8.3, 13.9, 19.8]
	}, {
		name: '巳月',
		data: [9, 4.2, 5.7, 7.6, 1.9, 2, 17.0, 6.6, 14.2, 10.3, 6.6, 24.8]
	}, {
		name: '大蛇丸',
		data: [9, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 11.6, 17.8]
	}, {
		name: '纳兹',
		data: [2.7, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 6.6, 14.2, 10.3, 6.6, 19.8]
	}, {
		name: '露西',
		data: [3, 4.2, 5.7, 7.6, 1.9, 15.2, 7.0, 16.6, 14.2, 10.3, 6.6, 17.8]
	}, {
		name: '千与千寻',
		data: [2.7, 4, 5.7, 7.6, 11.9, 15.2, 7.0, 16.6, 14.2, 10.3, 6.6, 16.8]
	}, {
		name: '赈早见琥珀主',
		data: [3, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 16.6, 24.8]
	}, {
		name: '无脸男',
		data: [2.7, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 12.6, 18.8]
	}, {
		name: '奴良陆生',
		data: [9, 4.2, 5.7,9.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 17.6, 19.8]
	}, {
		name: '羽衣狐',
		data: [2.7, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 12.6, 19.8]
	}, {
		name: '大蛇丸',
		data: [9, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 11.6, 17.8]
	}, {
		name: '玉藻前',
		data: [2.7, 4.2, 5.7, 7.6, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 10.6, 14.7]
	}]
});