在highcharts中划线时突出显示区域图表线
我有一个使用highcharts创建的区域。我遇到的问题是，当线穿过另一条线时，颜色会变得更浅。我如何保持线条颜色相同，或者当我将鼠标悬停在线条上以突出显示并显示它而不会使其变浅。
如何更改工具提示颜色以匹配线条颜色？
以下是我的代码
$(function () {
var marker = {
radius: 4,
fillColor: '#FFFFFF',
lineWidth: 2,
symbol: 'circle',
lineColor: null // inherit from series
};
var chart = new Highcharts.Chart({
credits: { enabled: false },
chart: {
renderTo: 'container',
type: 'area',
width: 600,
height: 400
},
title: { text: 'Title', x: -20 //center
},
subtitle: {text: 'Subtitle', x: -20 },
//title: { text: null },
xAxis: {
categories: [
'NOV 11' ,
'DEC 11' ,
'JAN 12' ,
'FEB 12' ,
'MAR 12' ,
'APR 12' ,
'MAY 12' ,
],
gridLineColor: '#DCEBEF',
gridLineWidth: 0.5,
lineColor: '#ffffff',
lineWidth: 1
//gridLineDashStyle: 'dash'
},
legend: {
enabled: false
},
yAxis: {
title: {
text: null
},
gridLineColor: '#DCEBEF',
lineColor: '#ffffff',
lineWidth: 1,
gridLineDashStyle: 'dash'
},
tooltip: {
formatter: function() {
return this.y;
},
backgroundColor: 'Grey',
borderWidth: 1,
borderColor: '#AAA',
style: {
fontWeight: 'bold',
color: 'White'
}
},
plotOptions: {
area: {
fillOpacity: 0.08
}
},
series: [{
name: null,
lineWidth: 2,
color: '#FA918C',
marker: marker,
data: [ 500, 500, 800, 1500, 1250, 800, 1150,],
zIndex: 2,
fillColor: {
linearGradient: [0, 0, 0,250],
stops: [
[0, 'rgba(250,145,150,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
},
{
name: null,
lineWidth: 2,
color: '#674313',
marker: marker,
data: [ 1500, 500, 800, 1500, 1050, 1800, 150,],
zIndex: 2,
fillColor: {
linearGradient: [0, 0, 0,250],
stops: [
[0, 'rgba(250,145,150,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
},
{
name: null,
lineWidth: 2,
color: '#87BCC2',
marker: marker,
data: [ 700, 950, 1100, 2000, 1650, 900, 1250,],
zIndex: 1,
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(135,188,194,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}
]
});
});
这是我的小提琴http://jsfiddle.net/tyz25j1p/3/
任何帮助将不胜感激
2 个答案:
答案 0 :(得分：1)
您可以使用.toFront()功能
plotOptions: {
area: {
fillOpacity: 0.08,
events: {
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
}
}
}
}
对于工具提示，您可以查看this answer
示例
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(function() {
var marker = {
radius: 4,
fillColor: '#FFFFFF',
lineWidth: 2,
symbol: 'circle',
lineColor: null // inherit from series
};
var chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'area',
width: 600,
height: 400
},
title: {
text: 'Title',
x: -20 //center
},
subtitle: {
text: 'Subtitle',
x: -20
},
//title: { text: null },
xAxis: {
categories: [
'NOV 11',
'DEC 11',
'JAN 12',
'FEB 12',
'MAR 12',
'APR 12',
'MAY 12',
],
gridLineColor: '#DCEBEF',
gridLineWidth: 0.5,
lineColor: '#ffffff',
lineWidth: 1
//gridLineDashStyle: 'dash'
},
legend: {
enabled: false
},
yAxis: {
title: {
text: null
},
gridLineColor: '#DCEBEF',
lineColor: '#ffffff',
lineWidth: 1,
gridLineDashStyle: 'dash'
},
tooltip: {
formatter: function() {
return this.y;
},
backgroundColor: 'Grey',
borderWidth: 1,
borderColor: '#AAA',
style: {
fontWeight: 'bold',
color: 'White'
}
},
plotOptions: {
area: {
fillOpacity: 0.08,
events: {
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
}
}
}
},
series: [{
name: null,
lineWidth: 2,
color: '#FA918C',
marker: marker,
data: [500, 500, 800, 1500, 1250, 800, 1150, ],
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(250,145,150,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}, {
name: null,
lineWidth: 2,
color: '#000000',
marker: marker,
data: [1500, 500, 800, 1500, 1050, 1800, 150, ],
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(250,145,150,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}, {
name: null,
lineWidth: 2,
color: '#87BCC2',
marker: marker,
data: [700, 950, 1100, 2000, 1650, 900, 1250, ],
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(135,188,194,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 600"></div>
答案 1 :(得分：1)
第一个问题，@ davcs86的答案很好，如果你想在鼠标悬停时把它们拿出来，但是如果你不想让这些线条变得模糊，你就必须把它们分成几个区域系列之后的单独系列和zIndex。
第二个问题，设置背景颜色的一种更简单的方法可能是挂钩tooltipRefresh事件并根据悬停的系列设置它：
chart: {
renderTo: 'container',
width: 600,
height: 400,
type: 'area',
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
}
此处的工作代码：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="height: 400px; width: 600"></div>
<script>
$(function() {
var marker = {
radius: 4,
fillColor: '#FFFFFF',
lineWidth: 2,
symbol: 'circle',
lineColor: null // inherit from series
};
var chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
renderTo: 'container',
width: 600,
height: 400,
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
},
title: {
text: 'Title',
x: -20 //center
},
subtitle: {
text: 'Subtitle',
x: -20
},
//title: { text: null },
xAxis: {
categories: [
'NOV 11',
'DEC 11',
'JAN 12',
'FEB 12',
'MAR 12',
'APR 12',
'MAY 12',
],
gridLineColor: '#DCEBEF',
gridLineWidth: 0.5,
lineColor: '#ffffff',
lineWidth: 1
//gridLineDashStyle: 'dash'
},
legend: {
enabled: false
},
yAxis: {
title: {
text: null
},
gridLineColor: '#DCEBEF',
lineColor: '#ffffff',
lineWidth: 1,
gridLineDashStyle: 'dash'
},
tooltip: {
formatter: function() {
return this.y;
},
backgroundColor: 'Grey',
borderWidth: 1,
borderColor: '#AAA',
style: {
fontWeight: 'bold',
color: 'White'
}
},
plotOptions: {
area: {
fillOpacity: 0.08
}
},
series: [{
name: null,
lineWidth: 0,
marker: {
enabled: false
},
color: '#FA918C',
type: "area",
data: [500, 500, 800, 1500, 1250, 800, 1150, ],
zIndex: 2,
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(250,145,150,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}, {
name: null,
lineWidth: 0,
color: '#000000',
type: 'area',
marker: {
enabled: false
},
data: [1500, 500, 800, 1500, 1050, 1800, 150, ],
zIndex: 2,
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(250,145,150,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}, {
name: null,
lineWidth: 0,
color: '#87BCC2',
type: 'area',
marker: {
enabled: false
},
data: [700, 950, 1100, 2000, 1650, 900, 1250, ],
zIndex: 1,
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgba(135,188,194,0.5)'],
[1, 'rgba(255,255,255,0.5)']
]
}
}, {
name: null,
lineWidth: 2,
color: '#FA918C',
marker: marker,
zIndex: 3,
data: [500, 500, 800, 1500, 1250, 800, 1150, ]
}, {
name: null,
lineWidth: 2,
color: '#000000',
type: 'area',
marker: marker,
data: [1500, 500, 800, 1500, 1050, 1800, 150, ],
zIndex: 3,
}, {
name: null,
lineWidth: 2,
color: '#87BCC2',
marker: marker,
data: [700, 950, 1100, 2000, 1650, 900, 1250, ],
zIndex: 3
}]
});
});
</script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？