javascript - 如何更改 AmXYChart 中的气球(工具提示)位置?

标签 javascript jquery charts amcharts

我正在使用 AmXYChart,我想自定义当我将光标放在项目符号(点)上时出现的气球的位置。这个想法如下图所示。 enter image description here

所以我只想让它出现在其他地方,但不要出现在项目符号的正上方。 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/

相关文章:

javascript - 无法在 Canvas 上拖放按钮

javascript - 获取数据表中页面的值?

javascript - css 文件不加载 application.scss

javascript - Highcharts 在单行中渲染折线图

Internet Explorer 中的 JavaScript 数组索引 'undefined'

javascript - 用于导航的悬停和 onClick 效果上的图像

javascript - 按下按钮时,将一个 div 推到当前 div 下面

jquery - jstree 杀死实时链接

javascript - 在 y 轴上绘制时间,在 x 轴上绘制日期 d3.js

javascript - 如何在一页上添加两个谷歌图表?