highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现2 5、图表重画
来源:互联网 发布:阿里云销售经理收入 编辑:程序博客网 时间:2024/05/17 23:08
当我们需要手动切换highcharts图表大小的时候,总想让图表内的一些文字大小也随之图表大小变动而变动,这样才不会显得图表放大或者缩小过后而和内部字体很不相称的结果。那么我们如何才能够达到这样一个目的呢?
一、解决思路
1、给图表高宽以及内部字体大小设定一个初始值;
2、页面提供图表放大缩小的按钮,点击的时候做出图表高宽以及字体大小的数字调整;
3、通过图表的一些固有方法对其图表进行更新操作,以此来达到图表整个放大缩小的效果。
二、解决办法
1、设定图表高宽以及字体大小的初始值,这里我们字体的大小我们一共包括以下几类:
1)、图表标题(title);
2)、图表副标题(subtitle);
3)、图表图例(legend);
4)、图表所有者(credits);
变量定义以及初始值给予的代码为:
view source
01.
var
chart =
null
;
02.
//图表高宽
03.
var
chartWidth = 500;
04.
var
chartHeight = 400;
05.
//图表字体变量
06.
var
chartTitleFontSize = 14;
//主标题字体大小
07.
var
chartSubTitleFontSize = 12
//副标题字体大小
08.
var
chartLegendFontSize = 12;
//图例Legend的字体大小
09.
var
chartCreditsFontSize = 9;
//图例右下角所有者字体大小
2、初始化图表
view source
01.
$(
function
() {
02.
$(document).ready(
function
() {
03.
chart =
new
Highcharts.Chart({
04.
chart: {
05.
renderTo:
'container'
,
06.
type:
'line'
,
07.
width: chartWidth,
08.
height: chartHeight
09.
},
10.
title: {
11.
text:
'图表手动放大缩小自动切换图标标题以及图例字体示例呈现'
,
12.
style: {
13.
fontSize: chartTitleFontSize
14.
}
15.
16.
},
17.
subtitle: {
18.
text:
'Source: www.stepday.com'
,
19.
style: {
20.
fontSize: chartSubTitleFontSize
21.
}
22.
},
23.
xAxis: {
24.
categories: [
'Jan'
,
'Feb'
,
'Mar'
,
'Apr'
,
'May'
,
'Jun'
,
25.
'Jul'
,
'Aug'
,
'Sep'
,
'Oct'
,
'Nov'
,
'Dec'
]
26.
},
27.
yAxis: {
28.
title: {
29.
text:
'入住屌丝个数'
30.
},
31.
plotLines: [{
32.
value: 0,
33.
width: 1,
34.
color:
'#808080'
35.
}]
36.
},
37.
legend: {
38.
borderWidth:0,
39.
style: {
40.
fontSize: chartLegendFontSize
41.
}
42.
},
43.
credits: {
44.
text:
"www.stepday.com"
,
45.
href:
"http://www.stepday.com"
,
46.
style: {
47.
color:
"red"
48.
}
49.
},
50.
series: [{
51.
name:
'2013年12月每月入住屌丝情况'
,
52.
data: [100,98,45,210,200,400,500,230,120,520,300,250]
53.
}]
54.
});
55.
});
56.
BindBtnClickEvent();
57.
});
由于页面有两个按钮,所以我们初始化的时候多了一步,需要调用一个页面按钮事件注册函数BindBtnClickEvent();
view source
01.
///给页面按钮注册事件
02.
function
BindBtnClickEvent() {
03.
$(
"#btnFangDa"
).click(
function
() {
04.
ChartFangDa();
05.
});
06.
$(
"#btnSuoXiao"
).click(
function
() {
07.
ChartSuoXiao();
08.
});
09.
}
3、图表放大方法
这个方法主要是给变量增加一定的数值且调用图表重画方法:
view source
01.
//图表放大
02.
function
ChartFangDa() {
03.
chartWidth += 100;
04.
chartHeight += 100;
05.
//增加字体大小 统一一次增加2个px
06.
chartTitleFontSize += 2;
07.
chartSubTitleFontSize += 2;
08.
chartLegendFontSize += 2;
09.
chartCreditsFontSize += 2;
10.
ChartUpdate();
11.
}
4、图表缩小
为了保证图表缩小不至于出现压缩的情况,导致图表无法浏览,所以我们需要判断是否小于我们所能够允许的最小值:
view source
01.
//图表缩小
02.
function
ChartSuoXiao() {
03.
//保证图表大小不会小于500*400
04.
if
(chartWidth > 500) {
05.
chartWidth -= 100;
06.
chartHeight -= 100;
07.
//增加字体大小 统一一次减少2个px
08.
chartTitleFontSize -= 2;
09.
chartSubTitleFontSize -= 2;
10.
chartLegendFontSize -= 2;
11.
chartCreditsFontSize -= 2;
12.
ChartUpdate();
13.
}
else
{
14.
alert(
"对不起,图表不能再缩小了,再缩小就不漂亮了哦~~!"
);
15.
}
16.
}
0 0
- highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现2 5、图表重画
- highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现2 5、图表重画
- highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现4 090. //图表放大
- highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现3 6、完整实例代码:
- highcharts图表放大属性(zoomType)说明以及示例详解
- HighCharts图表
- 图表
- 数据呈现&图表插件Highcharts介绍+图表联动案例
- Highcharts根据图例高度扩展图表高度
- ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- Highcharts入门 前端图表显示
- ECharts图表初级入门篇:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- ECharts图表入门:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- 图表入门
- python 数据图表呈现
- [highCharts入门]去除图表链接以及print download(导出,下载)
- Chart图表入门2
- jquery图表插件highcharts
- 使用onSaveInstanceState和onRestoreInstanceState来保存恢复被系统销毁的数据
- Oracle 表连接方式介绍(SML + NL + HJ)
- Jetty - linux -Too many open files
- Linux 常用实用命令
- cmd 下通过NTML代理访问Maven 库
- highcharts图表中级入门:图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现2 5、图表重画
- asp.net如何导出excel
- JVM的SNMP监控配置
- 分享可以输出mybatis3的sql语句的log4j脚本
- 杂谈X509证书, Java Keystore与Jetty
- Hibernate SQL实际sql语句监控- p6spy+hibernate+proxool 设置
- 经典 数学问题 Fibonacci Numbers
- winchill磁盘文件与document的映射关系在数据库中的体现
- 带上放心回家过年