highcharts 一图绘制多条线

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 一图绘制多条线相关推荐

python 一张图画多条线_Gnuplot.py在一张图上绘制多条线
我目前正试图使用gnuplot py从文本文件中绘制多行.我可以分别绘制两条线,但当我试图在同一个图上绘制它们时,它只绘制一条线.在这是我的代码:#!/usr/bin/env python impo ...
Python访问街区10个点，并俩俩绘制一条线，得到5条线，求最短的距离和？
Python访问街区10个点,并俩俩绘制一条线,得到5条线,求最短的距离和? 1. 效果图 2. 源码参考上一篇博客介绍了Python访问街区所有节点最短路径问题,并结合matplotlib可视化 ...
R语言ggplot2可视化：可视化所有日期不同时段任务的持续时间、将持续时间绘制成一条线（起始时间到结束时间），y轴表示活动发生的日期，x轴表示以小时为单位的时间
R语言ggplot2可视化:可视化所有日期不同时段任务的持续时间.将持续时间绘制成一条线(起始时间到结束时间),y轴表示活动发生的日期,x轴表示以小时为单位的时间(duration of an act ...
R语言ggplot2可视化：可视化所有日期不同时段任务的持续时间、将持续时间绘制成一条线（起始时间到结束时间），y轴表示活动发生的日期，x轴表示以小时为单位的时间、适应时间段跨越多天的情况
R语言ggplot2可视化:可视化所有日期不同时段任务的持续时间.将持续时间绘制成一条线(起始时间到结束时间),y轴表示活动发生的日期,x轴表示以小时为单位的时间.适应时间段跨越多天的情况(例如,当天 ...
java的Swing里怎么new一条线_java – 在JFrame上绘制一条线
我正在尝试使用图形2D绘制一条线,但然后该线出现在所有的线上 JFrame中的其他组件因此使它们不可见.我该如何解决这个问题? 这是代码: import javax.swing.*; import j ...
excel一张图绘制两条曲线
excel一张图绘制两条曲线分别使用不同的坐标轴设置主坐标轴.次坐标轴醉了,在右边啊!!!
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
php输出一条直线,Photoshop脚本绘制一条线
本节将演示如何使用脚本,绘制一条直线.首先创建一个空白的脚本文档,并保存在硬盘上某个位置. 首先创建一个空白的脚本文档,并保存在硬盘上某个位置. 接着输入脚本代码: 定义一个变量[doc],表示当前文 ...
python根据时间序列画折线图_Matplotlib：为每个时间序列subp绘制多条线
设置始终提供重现问题的示例数据. 我在这里提供了一些cols = pd.Index(['TJ', 'WH', 'SAFE', 'Walmart', 'Generic'], name='Store') ...

highcharts 一图绘制多条线

highcharts 一图绘制多条线相关推荐

最新文章

热门文章