<!DOCTYPE>
<html lang='en'>
<head>
<title>3-Highcharts曲線圖之顯示點值折線圖</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/themes/gray.js"></script><!--主題 網(wǎng)格 -->
<script>
$(function () {
$('#container').highcharts({
//chart:{type:'spline'},
/************標題***************/
//標題默認顯示在圖表的頂部，包括標題和副標題（subTitle），其中副標題是非必須的。
//主標圖
title: {
//標題文字水平對齊方式有，center,left,right,默認為center
//標題文字垂直對齊方式，有top、middle、bottom可選 默認為空【""】
text: '五省收益趨勢', //標題文字用text表示
x:-20
//隱藏標題 設(shè)置標題為null即可
//text:null
//text:'<h1>Monthly Average Temperature</h1>',
//useHTML:true,//是否解析html標簽，設(shè)置解析后，可以使用例如a等html標簽 默認是false
//floating:true,//是否浮動，設(shè)置浮動后，標題將不占用圖表區(qū)位置 默認是false
//style:{},//文字樣式，可以設(shè)置文字顏色、字體、字號，注意和css有略微的不同，例如font-size用fontSize、font-family用fontFamily表示
//margin:80,//標題和圖表區(qū)的間隔，當有副標題時，表示標題和副標題之間的間隔 默認是15
//x: -200, //相對于水平對齊的偏移量，可以是負數(shù)，單位是px 默認是0
//y: 20 //相對于垂直對齊的偏移量，可以使負數(shù)，單位是px 默認是0
},
//副標題
//subtitle: {
// text: 'Source: WorldClimate.com',
// x: -20
//},
/************坐標軸***************/
//所有的圖表除了餅圖都有X軸和Y軸，默認情況下，x軸顯示在圖表的底部，y軸顯示在左側(cè)
//（多個y軸時可以是顯示在左右兩側(cè)），通過設(shè)置chart.inverted = true 可以讓x，y軸顯示位置對調(diào)
xAxis: {
categories: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年'] //categories
},
yAxis: {
title: { text: 'gdp' },//y軸標題
//plotLines: [{ value: 0, width: 1, color: '#808080' }] ,
labels: {
formatter:function(){
if(this.value <=100) {
return this.value;
}else if(this.value >100 && this.value <=200) {
return this.value;
}else {
return this.value;
}
}
},
//標示線
plotLines:[{
color:'red', //線的顏色，定義為紅色
dashStyle:'solid', //默認值，這里定義為實線
value:600, //定義在那個值上顯示標示線，這里是在x軸上刻度為3的值處垂直化一條線
width:2 //標示線的寬度，2px
}]
},
/*************版權(quán)信息**********************/
credits:{
enabled:false // 禁用版權(quán)信息
},
/*************數(shù)據(jù)提示框**********************/
//tooltip: { valueSuffix: '°C' },
tooltip: {
//backgroundColor: '#FCFFC5', // 背景顏色
//borderColor: 'black', // 邊框顏色
//borderRadius: 10, // 邊框圓角
//borderWidth: 3, // 邊框?qū)挾? //shadow: true, // 是否顯示陰影
//animation: true , // 是否啟用動畫效果
//style: { // 文字內(nèi)容相關(guān)樣式
// color: "#ff0000",
// fontSize: "12px",
// fontWeight: "blod",
// fontFamily: "Courir new"
//}
enabled:false, //禁用提示框
//格式化函數(shù) this.x表示當前點X值，this.series表示當前數(shù)據(jù)列，this.y表示當前y值
//formatter:function(){
// return this.series.name + " " + this.x + " " + this.y;
//}//自定義提示
},
/************圖例***************/
//省略圖例會在下面顯示
//也可以設(shè)置 設(shè)置在下方
legend: {
layout: 'horizontal',//horizontal,vertical
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
/*
//顯示在靠右居中
legend: {
layout: 'vertical',//horizontal,vertical
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
*/
//plotOptions用于設(shè)置圖表中的數(shù)據(jù)點相關(guān)屬性。
plotOptions: {
line: {
//animation:true,//是否在顯示圖表的時候使用動畫
cursor:'pointer',//鼠標移到圖表上時手勢的樣式
dataLabels: {
enabled: true//是否在數(shù)據(jù)點上直接顯示數(shù)據(jù) 設(shè)為true表示是
},
enableMouseTracking: false //鼠標移到圖表上時是否顯示提示框
}
},
/*****************數(shù)據(jù)列******************/
series: [
{
name: 'A省',//圖例名稱
data: [200, 230, 190, 500, 600, 689]//數(shù)據(jù)
},
{
name: 'B省',
data: [400, 700, 690, 590, 700, 780]
},
{
name: 'C省',
data: [355, 230, 489, 609, 329, 800]
},
{
name: 'D省',
data: [190, 234, 343, 444, 567, 787]
},
{
name: 'E省',
data: [122, 345, 556, 778, 568, 888]
}
]
});
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>
圖片.png
