Highcharts Flag系列工具提示不跟随yAxis
Highcharts Flag series tooltip does not follow yAxis
参考http://jsfiddle.net/VJsjg/2/
$(function() {
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
marginTop: 100, //avoid overlapping with navigator
spacingLeft: 0
},
scrollbar: {
enabled: false
},
navigator: {
enabled: true,
top: 40
},
rangeSelector: {
selected: 1
},
yAxis:[{
top:140,
height:150
}],
series: [{
id:'msft',
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addAxis({
id:'secondY',
top:300,
height:150
});
chart.addSeries({
id:'adbe',
yAxis:'secondY',
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
chart.addSeries(
// the event marker flags
{
type : 'flags',
data : [{
x : Date.UTC(2011, 3, 25),
title : 'H',
text : 'Euro Contained by Channel Resistance'
}, {
x : Date.UTC(2011, 3, 28),
title : 'G',
text : 'EURUSD: Bulls Clear Path to 1.50 Figure'
}],
onSeries : 'adbe',
shape : 'circlepin',
width : 16
});
});
});
请注意,圆针H和C位于底部序列的正确位置。但是,当我们将鼠标悬停在上方时,工具提示的位置反而跟随顶部系列。
以前有人遇到过同样的问题吗?
我通过添加
来解决我自己的问题tooltip: {
followPointer:true
}
的级数。
解决方案请参考http://jsfiddle.net/VGj9q/
工具提示可以通过添加followingPointer:true来跟踪yAxis,但是这样的话,工具提示的形状变成了'square',而不是'callout'。
我认为这是highcharts的一个bug,一些类似的问题可以在github上找到。但似乎他们没有为'flag'系列修复它。
请参考http://jsfiddle.net/4jt9jxs1/2/。
Highcharts.stockChart('container', {
chart: {
height: 600,
},
navigator: {
enabled: false
},
yAxis: [{
id: "1",
height: 200,
},{
id: "2",
top: 300,
height: 200,
}],
tooltip:{
shared: false
},
series: [{
name: 'USD to EUR',
id: 'dataseries',
data: usdeur,
yAxis: "1"
},{
name: 'USD to EUR1',
id: 's1',
data: usdeur,
yAxis:"2"
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'A',
text: 'Shape: "squarepin"'
}, {
x: Date.UTC(2011, 3, 28),
title: 'A',
text: 'Shape: "squarepin"'
}],
onSeries: 'dataseries',
shape: 'squarepin',
width: 16
}, {
type: 'flags',
data: [{
x: Date.UTC(2010, 2, 1),
text: 'Shape: "circlepin"'
}, {
x: Date.UTC(2010, 9, 1),
text: 'Shape: "circlepin"'
}],
shape: 'circlepin',
onSeries: 's1',
yAxis:"2",
title: 'B',
tooltip: {
followPointer: true,
},
width: 16
}, {
type: 'flags',
data: [{
x: Date.UTC(2012, 2, 10),
title: 'C',
text: 'Shape: "flag"'
}, {
x: Date.UTC(2013, 3, 11),
title: 'C',
text: 'Shape: "flag"'
}],
yAxis:"2",
color: '#5F86B3',
fillColor: '#5F86B3',
onSeries: 's1',
width: 16,
style: { // text style
color: 'white'
},
states: {
hover: {
fillColor: '#395C84' // darker
}
}
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 不能从angular2中的子组件指定父组件中的数组
- Javascript:selenium Web驱动程序isDisplayed()不工作
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 内部分区字体大小获胜'调整浏览器窗口大小时不会随媒体查询而更改
- 高图:在 yAxis 中更新止损不起作用
- 我曾经跟随某人的代码样本,并尝试应用到我的HighChart程序,但我可以'I don’我一点也做不到
- 跟随<a>鼠标向下而不是单击链接
- Highcharts错误:TypeError:undefined不是对象(正在评估'chart.yAxis
- Js regex:替换不跟随或不跟随某个单词的单词
- 高图散点图-使工具提示不跟随指针
- 为什么DIV不跟随父元素'
- 有没有一种好方法来启用“在新窗口中打开链接”?在dom节点上的浏览器菜单选项,而不使链接跟随单击
- Highcharts Flag系列工具提示不跟随yAxis
- CasperJS不跟随ASP网站上的链接
- 按表排序,但索引不跟随
- js非常简单的验证模型不工作-跟随webtuts教程
- 画布元素中的JavaScript球不跟随光标
- 拖拽时列名/id不跟随列