Highchart多曲线多量程的处理

项目里使用的Highchart由于多条曲线的量程不一致使得趋势图的体验非常差,今天折腾下改掉。

最重要的网上参考在这里:
http://blog.csdn.net/Zhangjunjie789/article/details/47151965

不过这个文章只列出了代码,没有写出关键点。

我没有系统地去研究HighChart API,不过初步的实验得到了以下的经验。

一、原文中有这样一段关于Y轴的代码:

yAxis: [{
title: {
text: null
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}],
labels: {
enabled:false
}
},
{
title: {
text: null
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}],
labels: {
enabled:false
}
},
{
title: {
text: null
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}],
labels: {
enabled:false
}
},
{
title: {
text: null
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}],
labels: {
enabled:false
}
}
]

Y轴的数量可以定义若干个,我使用了3个。在使用前最好还是手工对数据做个大致的分析确定几个主要的数据范围。这里并不需要填写是和的范围,而是只需要将量程相似的数据放到一个量程上即可。

几个重要的参数分析:
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
这里value,width我保留了,color完全可以删除;在删除的情况下系统自动生成颜色。

title: {
text: null
}
这个参数非常重要,如果text不明确标示为null,会显示所有的Y坐标轴(并排显示),一般情况下显示1-2个坐标轴是合理的。

二、在数据列中指定坐标轴。

series: [{
name: ‘点击量’,
data: [376, 334, 313, 371, 412, 361, 318],
yAxis:0
}, {
name: ‘平均点击花费’,
data: [1.08, 1.04, 1.07, 0.97, 0.97, 0.97, 0.98],
yAxis:1
}, {
name: ‘花费’,
data: [407.6, 346.71,334.91,360.65, 401.6, 348.6, 311.03],
yAxis:2
}, {
name: ‘投入产出比’,
data: [0, 0, 0, 0, 1.22, 1.06, 0],
yAxis:3
}]

关键是指定 yAxis:3
yAxis是从0开始的Y坐标轴数组的序号。

之前完全没用过,有时间再钻研下吧。看看效果:
减肥前:
Snip20151229_3

减肥后:
Snip20151229_2

Continue Reading

Surface Pro安装Windows10

应该1年多以前折腾了SP的升级吧,现在搞忘记了,又重新来一次。

要想用U盘安装系统,操作步骤:
1、Power+Vol UP进入设置界面,关闭Secure Boot(要设置为Disabled)那个选项。
2、要制作一个USB启动盘。一定要是UEFI启动,且为FAT32格式!切记。
3、启动时先Power+Vol Down

接下来就是熟悉的安装过程了……

Continue Reading