Javascript 将图表鼠标事件传递到格式化标签
我已经使用Highcharts创建了一个图表，带有自定义标签来解释图表的细节 现在，如果我将鼠标悬停在任何项目上（例如，条形图、柱形图），相应的自定义标签应高亮显示或选中 下面是我的图表代码Javascript 将图表鼠标事件传递到格式化标签,javascript,jquery,css,charts,highcharts,Javascript,Jquery,Css,Charts,Highcharts,我已经使用Highcharts创建了一个图表，带有自定义标签来解释图表的细节 现在，如果我将鼠标悬停在任何项目上（例如，条形图、柱形图），相应的自定义标签应高亮显示或选中 下面是我的图表代码 $(function () { $('#ao-projectssummry-chart').highcharts({ chart: { type: "columnrange", inverted : tr
$(function () {
$('#ao-projectssummry-chart').highcharts({
chart: {
type: "columnrange",
inverted : true
},
title: { text: null },
credits: { enabled: false },
legend: { enabled: false },
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b',
new Date(this.x)) ;
}
},
yAxis: {
opposite: true,
title : null,
crosshair: {
width: 2,
color: "#F26C6D",
snap: true,
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%a - %a - %y', new Date(this.x));
}
},
gridLineWidth: 1,
gridZIndex: 0,
type: 'datetime',
min: Date.UTC(2016, 0, 1),
max: Date.UTC(2016, 11, 31),
},
xAxis: {
categories: ['Set up', 'Quantification of Benefit', 'Execute', 'Deploy to Pilot Stores', 'Full Deployment', 'Roll out to Production'],
min: 0,
max: 5,
title: null,
gridLineWidth: 1,
gridZIndex: 0,
labels:
{
enabled: false
},
crosshair: {
snap: true
}
},
plotOptions: {
series: {
pointWidth: 10,
borderRadius: 0,
marker: {
enbled : false
}
},
line: {
lineWidth:-1,
marker: {
enabled: true,
radius:0,
symbol: 'circle'
}
}
},
series: [
{
name: "Project Tire Sale",
data: [
{
x: 0.40,
low: Date.UTC(2016,0,15),
high: Date.UTC(2016,2,15),
color: "#60B3D1"
},
{
x: 0.40,
low: Date.UTC(2016,2,15),
high: Date.UTC(2016,4,24),
color: "#60B3D1"
},
{
x: 0.40,
low: Date.UTC(2016,4,7),
high: Date.UTC(2016,6,15),
color: "#9CCB01"
}
,
{
x: 0.40,
low: Date.UTC(2016, 6, 7),
high: Date.UTC(2016, 8, 15),
color: "#9CCB01"
},
{
x: 0.40,
low: Date.UTC(2016, 8, 7),
high: Date.UTC(2016, 10, 15),
color: "#9CCB01"
}
]
},
{
name: 'Project Tire Sale',
type: 'line',
data: [
{
x: 0.40,
y: Date.UTC(2016,2,15),
marker: {
symbol: 'url(/../Content/Img/ao-calendar.png)',
}
},
{
x: 0.40,
y: Date.UTC(2016,4,10),
marker: {
symbol: 'url(/../Content/Img/ao-graph.png)',
}
},
{
x: 0.40,
y: Date.UTC(2016,6,15),
marker: {
symbol: 'url(/../Content/Img/ao-runningman.png)',
}
},
{
x: 0.40,
y: Date.UTC(2016, 8, 5),
marker: {
symbol: 'url(/../Content/Img/ao-a.png)',
}
},
{
x: 0.40,
y: Date.UTC(2016, 10, 15),
marker: {
symbol: 'url(/../Content/Img/ao-green-arrow.png)',
}
}
]
}
]
});
});
$（函数（）{
$（“#ao项目图表”）。高图({
图表：{
类型：“columnrange”，
倒过来：是的
},
标题：{text:null}，
信用证：{已启用：错误}，
图例：{enabled:false}，
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%e-%b”，
新日期（本条第x款）；
}
},
亚克斯：{
相反：是的，
标题：空，
十字线：{
宽度：2，
颜色：“F26C6D”，
是的，
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%a-%a-%y”，新日期（this.x））；
}
},
网格线宽度：1，
gridZIndex:0，
键入：“日期时间”，
最小值：UTC日期（2016年0月1日），
最大值：UTC日期（2016年11月31日），
},
xAxis：{
类别：[“设置”、“效益量化”、“执行”、“部署到试点商店”、“全面部署”、“推广到生产”]，
分:0,，
最高：5，
标题：空，
网格线宽度：1，
gridZIndex:0，
标签：
{
已启用：false
},
十字线：{
快照：是的
}
},
打印选项：{
系列：{
点宽度：10，
边界半径：0，
标记：{
恩布莱德：错
}
},
行：{
线宽：-1，
标记：{
启用：对，
半径：0，
符号：“圆圈”
}
}
},
系列：[
{
名称：“轮胎销售项目”，
数据：[
{
x:0.40，
低位：UTC日期（2016,0,15），
高：UTC日期（2016年2月15日），
颜色：“60B3D1”
},
{
x:0.40，
低位：UTC日期（2016年2月15日），
高：UTC日期（2016年4月24日），
颜色：“60B3D1”
},
{
x:0.40，
低位：UTC日期（2016年4月7日），
高：UTC日期（2016年6月15日），
颜色：“9CCB01”
}
,
{
x:0.40，
低位：UTC日期（2016年6月7日），
高：UTC日期（2016年8月15日），
颜色：“9CCB01”
},
{
x:0.40，
低位：UTC日期（2016年8月7日），
高：UTC日期（2016年10月15日），
颜色：“9CCB01”
}
]
},
{
名称：“轮胎销售项目”，
键入：“行”，
数据：[
{
x:0.40，
y：UTC日期（2016年2月15日），
标记：{
符号：“url（/../Content/Img/ao calendar.png）”，
}
},
{
x:0.40，
y：UTC日期（2016年4月10日），
标记：{
符号：“url（/../Content/Img/ao graph.png）”，
}
},
{
x:0.40，
y：UTC日期（2016年6月15日），
标记：{
符号：“url（/../Content/Img/ao runningman.png）”，
}
},
{
x:0.40，
y:UTC日期（2016年8月5日），
标记：{
符号：“url（/../Content/Img/ao-a.png）”，
}
},
{
x:0.40，
y:UTC日期（2016年10月15日），
标记：{
符号：“url（/../Content/Img/ao green arrow.png）”，
}
}
]
}
]
});
});
请帮忙。提前谢谢 您可以使用renderer.rect（）方法制作自定义十字线，您可以使用click或mouseover事件回调函数获取点的坐标。您可以使用jQuery向标签添加新类，并在css中以另一种方式格式化标签。您还可以使用jQuery使网格线稍微长一点 在这里您可以找到制作网格线的函数
var longerGridLines = function(chart) {
var d;
Highcharts.each($('.highcharts-grid')[0].children, function(p, i) {
d = p.attributes.d.value
d = d.substring(d.indexOf(' ') + 1, d.length - 1);
d = d.substring(d.indexOf(' ') + 1, d.length - 1);
p.attributes.d.value = 'M 0 ' + d;
})
},
mouseOver: function() {
$('.cross').remove();
Highcharts.each($('.customLabel'), function(p, i) {
$(p).removeClass('customLabelSelected');
})
$($('.customLabel')[this.x]).addClass('customLabelSelected')
var xAxis = this.series.xAxis,
distance = xAxis.toPixels(1) - xAxis.toPixels(0),
plotTop = xAxis.toPixels(this.x - 0.5),
width = this.series.chart.chartWidth;
this.series.chart.renderer.rect(0, plotTop, width, distance)
.attr({
fill: 'rgba(200,200,200,0.5)',
zIndex: 1
}).addClass('cross')
.add();
},