HighCharts系列Z指数 [英] HighCharts series Z index
本文介绍了HighCharts系列Z指数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有一种方法可以在Highcharts中引入一个系列,而不会颠倒系列的顺序?
在我的代码中,我用过:
$('#graf-1')。highcharts({
图:{
zoomType:'xy'
},
title:{
text:'Title'
},
字幕:{
text:'来源:'
} ,
xAxis:[{
categories:datax
}],
yAxis:[{//小学yAxis
标签:{
格式:'{ value}€',
style:{
color:'#89A54E'
}
},
title:{
text:eixoy,
风格:{
颜色:'#89A54E'
}
}
},{// Secondary yAxis
title:{
text:eixoz,
style:{
color:'#4572A7'
}
},
标签:{
格式:'{value}%',
style:{
color:'#4572A7'
}
b
$ b $ 'vertical',
align:'left',
x:120,
verticalAlign:'top',
y:100,
floating:true,
backgroundColor:'#FFFFFF'
},
系列:[{
名称:eixoz,
color:'#4572A7',
type:'line',
yAxis:1,
data:dataz,
tooltip:{
valueSuffix: '%'
}
},{
名称:eixoy,
颜色:'#89A54E',
类型:'列',
data:datay,
tooltip:{
valueSuffix:'€'
}
}]
});
这是生成一个带有两个y轴的图表,其中该行显示在列的下方。我想在列上有一行(如z-index)。但是,我找不到执行此操作的方法。
解决方案
Highcharts有一个 zIndex 属性。
pre code $系列: b yAxis:1,
data:dataz,
tooltip:{
valueSuffix:'%'
},
zIndex:2
},{
name:eixoy,
color:'#89A54E',
type:'column',
data:datay,
tooltip:{
valueSuffix:'€'
},
zIndex:1
}]
请参阅此小提琴。
Is there a way to bring a series to front in Highcharts without reversing the order of the series?
In my code, I've used:
$('#graf-1').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Title'
},
subtitle: {
text: 'Source:'
},
xAxis: [{
categories: datax
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} €',
style: {
color: '#89A54E'
}
},
title: {
text: eixoy,
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: eixoz,
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: eixoz,
color: '#4572A7',
type: 'line',
yAxis: 1,
data: dataz,
tooltip: {
valueSuffix: ' %'
}
}, {
name: eixoy,
color: '#89A54E',
type: 'column',
data: datay,
tooltip: {
valueSuffix: ' €'
}
}]
});
This is producing a chart with two y axis, where the line is displayed under the column. I want to have the line over the column (like z-index). However, I can't find the method to do it.
解决方案
Highcharts has a zIndex property.
series: [{
name: eixoz,
color: '#4572A7',
type: 'line',
yAxis: 1,
data: dataz,
tooltip: {
valueSuffix: ' %'
},
zIndex: 2
}, {
name: eixoy,
color: '#89A54E',
type: 'column',
data: datay,
tooltip: {
valueSuffix: ' €'
},
zIndex: 1
}]
See this fiddle.
这篇关于HighCharts系列Z指数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文