如何更改AmXYChart中的气球(工具提示)位置？
如何更改AmXYChart中的气球(工具提示)位置？
提问于 2014-06-24 14:55:42
我使用的是AmXYChart，我想要自定义气球的位置，当我把光标放在一个项目(点)上时，气球就会出现。这个想法就在下面的图片上。
所以我只想让它出现在其他地方，而不是在子弹上方。AmXYChart允许我这样做吗？
更新1:
<html>
<head>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
</style>
<script src="amstock.js"></script>
<head>
<body>
<div id="chartdiv"></div>
<script type="text/javascript">
var chartData = [ {
x : 10,
y : 14
}, {
x : 5,
y : 4
}, {
x : 11,
y : 11
}, {
x : 10,
y : 10
}, {
x : 15,
y : 19
}, {
x : 13,
y : 13
}, {
x : 1,
y : 5
} ];
var chart = new AmCharts.AmXYChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.dataProvider = chartData;
chart.marginLeft = 35;
chart.startDuration = 1.5;
var xAxis = new AmCharts.ValueAxis();
xAxis.position = "left";
xAxis.autoGridCount = true;
chart.addValueAxis(xAxis);
var yAxis = new AmCharts.ValueAxis();
yAxis.position = "bottom";
yAxis.autoGridCount = true;
chart.addValueAxis(yAxis);
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.xField = "x";
graph.yField = "y";
graph.lineAlpha = 0;
graph.bullet = "round";
graph.balloonText = "x:[[x]] y:[[y]]";
chart.addGraph(graph);
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.hideResizeGrips = false;
chart.addChartScrollbar(chartScrollbar);
var balloon = chart.balloon;
balloon.adjustBorderColor = true;
balloon.color = "#000000";
balloon.fillColor = "#FFFFFF";
balloon.cornerRadius = 3;
balloon.borderThickness = 3;
balloon.horizontalPadding = 17;
balloon.offsetX = 50;
balloon.offsetY = 8;
chart.write("chartdiv");
</script>
</body>
</html>更新2:我注意到的有趣的事情。当我只包含下一个AmChart js文件时
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/xy.js"></script> offsetX和offsetY工作得很好，但我在页面上使用了股票图表，也使用了木图。当我试图在这两个文件之后包含amstock.js时，如下所示
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/xy.js"></script>
<script src="amstock.js"></script> // amstock.js located in the same folder where my HTML file is located, so it is ok.offsetX和offsetY不工作-气球会出现默认的偏移量(就在子弹上方)。所以这些文件似乎不太合拍。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-25 06:06:33
是的，am图表提供了气球位置的选项。
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
}offsetX和offsetY是鼠标指针的水平和垂直距离。
Stack Overflow用户
发布于 2016-03-18 16:33:35
我无法让这些补偿起作用，于是我提交了一张带有图表的罚单。巨大的支持。他们回来告诉我，需要设置一个额外的(fixedPosition)参数。
他们答应更新他们的文档。
以下是对我起作用的东西：
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"fixedPosition": false,
"offsetX": 50,
"offsetY": 8
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24389873
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号