6、完整实例代码: 001.
<!DOCTYPE html>
002.
< html >
003.
< head >
004.
< meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >
005.
< title >Highcharts Demo - jsFiddle demo</ title >
006.
< script type = 'text/javascript' src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ></ script >
007.
< link rel = "stylesheet" type = "text/css" href = "/css/result-light.css" >
008.
< style type = 'text/css' >
009.
</ style >
010.
< script type = 'text/javascript' >// <![CDATA[
011.
012.
var chart = null;
013.
//图表高宽
014.
var chartWidth = 500;
015.
var chartHeight = 400;
016.
//图表字体变量
017.
var chartTitleFontSize = 14; //主标题字体大小
018.
var chartSubTitleFontSize = 12 //副标题字体大小
019.
var chartLegendFontSize = 12; //图例Legend的字体大小
020.
var chartCreditsFontSize = 9; //图例右下角所有者字体大小
021.
022.
$(function () {
023.
$(document).ready(function () {
024.
chart = new Highcharts.Chart({
025.
chart: {
026.
renderTo: 'container',
027.
type: 'line',
028.
width: chartWidth,
029.
height: chartHeight
030.
},
031.
title: {
032.
text: '图表手动放大缩小自动切换图标标题以及图例字体示例呈现',
033.
style: {
034.
fontSize: chartTitleFontSize
035.
}
036.
037.
},
038.
subtitle: {
039.
text: 'Source: www.stepday.com',
040.
style: {
041.
fontSize: chartSubTitleFontSize
042.
}
043.
},
044.
xAxis: {
045.
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
046.
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
047.
},
048.
yAxis: {
049.
title: {
050.
text: '入住屌丝个数'
051.
},
052.
plotLines: [{
053.
value: 0,
054.
width: 1,
055.
color: '#808080'
056.
}]
057.
},
058.
legend: {
059.
borderWidth:0,
060.
style: {
061.
fontSize: chartLegendFontSize
062.
}
063.
},
064.
credits: {
065.
text: "www.stepday.com",
066.
href: "http://www.stepday.com",
067.
style: {
068.
color: "red"
069.
}
070.
},
071.
series: [{
072.
name: '2013年12月每月入住屌丝情况',
073.
data: [100,98,45,210,200,400,500,230,120,520,300,250]
074.
}]
075.
});
076.
});
077.
BindBtnClickEvent();
078.
});
079.
080.
///给页面按钮注册事件
081.
function BindBtnClickEvent() {
082.
$("#btnFangDa").click(function () {
083.
ChartFangDa();
084.
});
085.
$("#btnSuoXiao").click(function () {
086.
ChartSuoXiao();
087.
});
088.
}
089.
|
highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现3 6、完整实例代码:
最新推荐文章于 2019-12-20 13:47:33 发布