示例圖片脓豪，在網(wǎng)上下載一張圖片如圖：其中數(shù)據(jù)自定義
圖片.png
引入上節(jié)模版配置 在script標簽中寫代碼：具體代碼如下 信息將在代碼中解釋。
分析：“五省收益趨勢”是標題忌卤；
x坐標為【2011年-2016年】扫夜、y坐標為【0-1000】，標題為gdp驰徊；
右側(cè)為圖例笤闯；
<!DOCTYPE>
<html lang='en'>
<head>
<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,
//隱藏標題 設置標題為null即可
//text:null
//text:'<h1>Monthly Average Temperature</h1>',
//useHTML:true,//是否解析html標簽张漂，設置解析后晶默，可以使用例如a等html標簽 默認是false
//floating:true,//是否浮動，設置浮動后鹃锈，標題將不占用圖表區(qū)位置 默認是false
//style:{},//文字樣式荤胁，可以設置文字顏色、字體屎债、字號，注意和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è)）欣福，通過設置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;
}
}
}
},
/*************版權(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"
}
},
/************圖例***************/
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
/*****************數(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
