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]
	}]
});