我正在使用 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 工作正常,但我在页面上使用股票图表以及 xycharts。当我尝试在这两个文件后面包含 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 不起作用 - 气球以默认偏移量出现(就在项目符号上方)。所以看起来这些文件彼此不兼容。
最佳答案
是的,上午图表提供了气球位置选项
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
}
offsetX 和 offsetY 是距鼠标指针的水平和垂直距离
关于javascript - 如何更改 AmXYChart 中的气球(工具提示)位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24389873/