Question

我正在使用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不起作用 - 气球出现时带有默认偏移（在子弹上方）。所以看起来这些文件彼此不相处。

Answer 1

是的，我的图表提供了气球位置选项

"balloon": {
    "borderThickness": 3,
    "horizontalPadding": 17,
    "offsetX": 50,
    "offsetY": 8
}

offsetX，offsetY是鼠标指针的水平和垂直距离

Answer 2

我无法获得这些抵消工作，并提交了一张带有amcharts的票。很大的支持。他们回来告诉我有一个额外的（fixedPosition）参数需要设置。

他们答应更新他们的文档。

这对我有用：

"balloon": {
    "borderThickness": 3,
    "horizontalPadding": 17,
    "fixedPosition": false,
    "offsetX": 50,
    "offsetY": 8
}

如何在AmXYChart中更改气球（工具提示）位置？

2 个答案: