无法将鼠标悬停在 xCharts 中工作
Can't get mouseover to work in xCharts
我正在学习如何在PHP上使用xCharts,并一直在按照示例学习如何制作不同类型的图表。唯一对我不起作用的是鼠标悬停和鼠标退出功能。我一直在使用此示例代码:
var tt = document.createElement('div'),
leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
topOffset = -32;
tt.className = 'ex-tooltip';
document.body.appendChild(tt);
var data = {
"xScale": "time",
"yScale": "linear",
"main": [
{
"className": ".pizza",
"data": [
{
"x": "2012-11-05",
"y": 6
},
{
"x": "2012-11-06",
"y": 6
},
{
"x": "2012-11-07",
"y": 8
},
{
"x": "2012-11-08",
"y": 3
},
{
"x": "2012-11-09",
"y": 4
},
{
"x": "2012-11-10",
"y": 9
},
{
"x": "2012-11-11",
"y": 6
}
]
}
]
};
var opts = {
"dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
"tickFormatX": function (x) { return d3.time.format('%A')(x); },
"mouseover": function (d, i) {
var pos = $(this).offset();
$(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
.show();
},
"mouseout": function (x) {
$(tt).hide();
}
};
var myChart = new xChart('line-dotted', data, '#myChart', opts);
需要明确的是,正在创建图表并且数据是正确的,唯一缺少的是鼠标悬停,它应该根据示例工作。任何想法为什么这不起作用?我错过了什么?
您必须包含 .ex-tooltip 的 css,如果您检查示例,您将看到:
.ex-tooltip {
position: absolute;
background: #EEE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 5px;
-webkit-box-shadow: 0 1px 3px #000;
-moz-box-shadow: 0 1px 3px #000;
-ms-box-shadow: 0 1px 3px #000;
-o-box-shadow: 0 1px 3px #000;
box-shadow: 0 1px 3px #000;
border-collapse: separate;
display: none;
}
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- 无法将鼠标悬停在 xCharts 中工作