highcharts 一图绘制多条线

时间：2015-02-16 16:59:43 阅读：720 评论：0 收藏：0 [点我收藏+]

标签：

1. yAxis增加一个标题
yAxis: [{
max:{$pe.maxCatArr.{$catlog}.avg}, // 定义Y轴最大值
min:0, // 定义最小值
minPadding: 0.01,
maxPadding: 0.01,
tickInterval:{$pe.maxCatArr.{$catlog}.avgtickInterval}, // 刻度值
title: {
text: ‘耗时‘
},

　　plotLines: [{ //一条延伸到整个绘图区的线，标志着轴中一个特定值。
color: ‘#f00‘,
dashStyle: ‘Dash‘, //Dash,Dot,Solid,默认Solid
width: 1.5,
value: {$pe.catArrArr.{$catlog}}, //y轴显示位置
zIndex: 5
}
,{ //一条延伸到整个绘图区的线，标志着轴中一个特定值。
color: ‘#000‘,
dashStyle: ‘Solid‘, //Dash,Dot,Solid,默认Solid
width: 1.5,
value: {$pe.maxCatArr.{$catlog}.limit}, //y轴显示位置
zIndex: 5
}

]
},
{
max:{$pe.maxCatArr.{$catlog}.total}, // 定义Y轴最大值
min:0, // 定义最小值
minPadding: 1,
maxPadding: 1,
tickInterval:{$pe.maxCatArr.{$catlog}.totaltickInterval}, // 刻度值
title: {
text: ‘请求次数‘
}
}
]
,
2.将新标题放到右边 opposite 参数

},
{
max:{$pe.maxCatArr.{$catlog}.total}, // 定义Y轴最大值
min:0, // 定义最小值
minPadding: 1,
maxPadding: 1,
opposite: true,
tickInterval:{$pe.maxCatArr.{$catlog}.totaltickInterval}, // 刻度值
title: {
text: ‘请求次数‘
}
}
]
,

3.把右边标题空出来相对比较好看 marginRight 参数
chart: {
type: ‘spline‘,
animation: Highcharts.svg, // don‘t animate in old IE
marginRight: 100,
events: {
load: function() {

// set up the updating of the chart each second
var series = this.series;
// console.log(yAxis[0].options.plotLines[0]);
var maxtime = {$pe.maxtime};

var pmtex = 0;



var yAxis = this.yAxis;

}
}
},
4.将第二条线的数据，画到这个图，这里是请求计数
series: [

{
name: ‘响应时间(秒)‘,
data: (function() {
// generate an array of 响应时间(秒)
var data = [] ;

{foreach $tArr as $time_local => $vArr}

var time_local={$time_local}*1000;
var y = {$vArr.avg};

data.push({
x: time_local,
y: y
});

{/foreach}

return data;
}
)()
},

{

name: ‘请求计数‘,
yAxis: 1,
data: (function() {
// generate an array of 响应时间(秒)
var data = [] ;

{foreach $tArr as $time_local => $vArr}

var time_local={$time_local}*1000;
var y = {$vArr.total};

data.push({
x: time_local,
y: y
});

{/foreach}

return data;
}
)()
}]

highcharts 一图绘制多条线

标签：

原文地址：http://blog.csdn.net/zzz_781111/article/details/43852375

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行