仅当悬停在 、 高图表上时,才通过 x 和 y 绘图线将文本添加到生成的象限区域
Add text to generated quadrant area by x and y plot lines only when hovering , highcharts
这是通过x和y绘图线,highcharts将文本添加到生成的象限区域的另一个问题。
在上一个问题中,我需要将文本添加到生成的象限区域,接受答案的代码示例位于
"http://codepen.io/anon/pen/eJVmWL"
但是,如果我在悬停到该象限时需要显示右上角的区域文本怎么办?可能吗?
可以更改标签opacity
,并仅显示指针当前悬停的象限的标签。您可以通过检查绘图线和绘图区域来确定指针所在的象限。
示例:http://codepen.io/anon/pen/qbGWME?editors=0010
$(function() {
var categories = ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15'];
var chart = $('#container').highcharts({
credits: {
enabled: false //去除右下角的水印
},
chart: {
type: 'scatter',
events: {
load: function() {
var chart = this,
r = chart.renderer,
each = Highcharts.each,
left = chart.plotLeft,
top = chart.plotTop,
h = chart.plotHeight,
w = chart.plotWidth,
xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
labels = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
labelStyles = {
'font-size': '12px',
'color': 'red'
},
attr = {
zIndex: 10
},
xPlotLine, yPlotLine, bbox, x, y;
chart.label = [];
xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value);
yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value);
//render
each(labels, function(label, i) {
chart.label[i] = r.text(label, 0, 0)
.attr(attr)
.css(labelStyles)
.add();
bbox = chart.label[i].getBBox();
//console.log(w);
switch (i) {
case 0:
x = ((xPlotLine + left) / 2) - (bbox.width / 2);
y = ((yPlotLine + top) / 2) - (bbox.height / 2);
break;
case 1:
x = left + xPlotLine + ((w - xPlotLine) / 2) - (bbox.width / 2);
y = ((yPlotLine + top) / 2) - (bbox.height / 2);
break;
case 2:
x = ((xPlotLine + left) / 2) - (bbox.width / 2);
y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
break;
case 3:
x = left + xPlotLine + ((w - xPlotLine) / 2) - (bbox.width / 2);
y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
break;
}
chart.label[i].attr({
x: x,
y: y,
opacity: 0
});
});
}
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
xAxis: {
gridLineColor: "#E9E9E9",
gridLineWidth: 1,
tickWidth: 0,
lineColor: "#E9E9E9",
plotLines: [{
color: '#FF0000',
width: 1,
zIndex: 999,
value: 10,
dashStyle: 'dot'
}]
},
yAxis: {
title: {
align: 'high',
rotation: 0,
offset: 0,
y: -17, //上移一点点,
text: ""
},
labels: {
enabled: false
},
plotLines: [{
color: '#FF0000',
width: 1,
zIndex: 999,
value: 100,
dashStyle: 'dot'
}]
},
plotOptions: {},
series: [{
data: [{
x: 1,
y: 320
}, {
x: 2,
y: 10
}, {
x: 2,
y: 3
}, {
x: 3,
y: 3
}, {
x: 10,
y: 32
}, {
x: 20,
y: 33
}, {
x: 12,
y: 31
}, {
x: 32,
y: 30
}
],
color: '#9adede',
showInLegend: false
}]
}).highcharts();
$("#container").mousemove(move);
function move(event) {
var x = event.pageX,
y = event.pageY,
quadrant;
if (chart.label) {
// get quadrant
quadrant = getQuadrant(chart,x,y);
if(chart.currentQ !== quadrant) {
chart.currentQ = quadrant;
// hide all
Highcharts.each(chart.label, function(label){
label.attr({opacity:0});
});
if(quadrant !== null) {
// show label if hidd
chart.label[quadrant].attr({
opacity: 1
});
}
}
}
}
function getQuadrant(chart,x,y) {
var xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value),
yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value),
left = chart.plotLeft,
top = chart.plotTop,
h = chart.plotHeight,
w = chart.plotWidth,
isTop, isLeft;
// 0 - topL, 1 - topR, 2 - botL, 3 - botR
if(!chart.isInsidePlot(x - left, y - top)) {
// not in plot area
return null;
}
// top or bottom
isTop = y < yPlotLine ? 0 : 2;
// left or right
isLeft = x < xPlotLine ? 0 : 1;
return isTop + isLeft;
}
});
相关文章:
- Javascript,将文本添加到具有现有文本节点的元素中
- 选中单选框时,将文本添加到文本框中
- 为未标记的文本添加CSS样式
- 如何将表格中的文本添加到使用按钮输入的文本区域
- 有没有办法将mouseOver上的个人文本添加到完整日历中
- 改变“;onClick"这个jQuery的操作从清除输入文本改为将输入文本添加到下面的列表中
- 如何使用JavaScript将链接文本添加到电子邮件中
- 将动态验证文本添加到自定义jQuery验证规则中
- 将文本添加到每个数组元素的开头
- 单击将按钮中的文本添加到带有jQuery或JS的输入框中
- 通过按钮将不同的文本添加到文本区域-不起作用
- 如何为Fabric.js中的文本添加CSS属性
- 如何将预加载程序文本添加到jQuery Cycle 2中
- Javascript Regex exec 在向搜索文本添加属性/引号后冻结
- 如何在所有浏览器中向文本区域中的选定文本添加 标记
- jQuery将文本添加到放置在表格单元格中的图像中
- D3 垂直条形图为标签文本添加换行符
- 单击时从列表中将文本添加到文本框的方法
- 将文本添加到 D3 圆环图的中心
- 如何将非可变文本添加到javascript打印弹出窗口中