javascript - Amcharts XY 图表不显示气球

Question

我的图表没有显示气球，我不明白为什么。我在 y 光标上显示了一个气球，我可以将其更改为显示 x 轴的值，但我无法显示在 x 光标上或值线后面的气球中显示 x 轴值的气球。

http://jsfiddle.net/47qdtboa/

AmCharts.makeChart("chartdiv",
            {
"type": "xy",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"startDuration": 1.5,
"handDrawn": true,
"theme": "light",
"thousandsSeparator": "'",
"chartCursor": {
            "categoryBalloonEnabled": true,
            "valueLineAxis": "ValueAxis-1",
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
        "balloonText": "[[Distance (m)]]",
                    "showBalloon": true,
    "zoomable": false
    },
//"trendLines": [],
    "color":"#777777",
    "fontFamily":"Londrina Outline",
    "fontSize":23, 
    "categoryField": "Distance (km)",
"graphs": [
    {

        "id": "AmGraph-4",
        "balloonText": "[[Distance (m)]]",
        "title": "graph 4",
        "valueAxis": "Not set",
                    "lineColor": "#59C45C",
        "lineThickness": 3,
                    "fillAlphas": 0.13,
        "fillColors": "#59C45C",
        "fillToAxis": "ValueAxis-2",
        "valueField": "Distance (km)",
        "xAxis": "Distance (km)",
        "xField": "Distance (km)",
        "yField": "Elevation (m)"
    }
],
"valueAxes": [
    {
        "id": "ValueAxis-1",
        "axisAlpha": 0,
        "unit": "m"

    },
    {
        "id": "ValueAxis-2",
        "position": "bottom",
        "axisAlpha": 0,
        "unit": "km",
        "showLastLabel": false
    }
],
"allLabels": [],
"amExport": {},
"balloon": {},
"titles": [],
"dataProvider": [
    {
        "Distance (m)": "0",
        "Distance (km)": "0",
        "Elevation (m)": "749"
    },
    {
        "Distance (m)": "101.543639516933",
        "Distance (km)": "0.11",
        "Elevation (m)": "749"
    },

    { and many more like that ...},

Answer 1

我在这里更新了你的 fiddle ...

http://jsfiddle.net/47qdtboa/1/

您需要做的基本上是引用 x 或 y 轴而不是字段名称。您还需要向图表添加项目符号点以使气球出现。

"graphs": [
    {

        "id": "AmGraph-4",
        "balloonText": "[[x]] (km)",  /*CHANGED THIS LINE*/
        "bullet": "round",            /*ADDED THIS LINE*/
        "bulletSize": 1,              /*ADDED THIS LINE*/
        "title": "graph 4",
        "valueAxis": "Not set",
        "lineColor": "#59C45C",
        "lineThickness": 3,
        "fillAlphas": 0.13,
        "fillColors": "#59C45C",
        "fillToAxis": "ValueAxis-2",
        "xAxis": "Distance (km)",
        "xField": "Distance (km)",
        "yField": "Elevation (m)"
    }
],

不确定您是否可以引用实际的字段名称，但在快速测试下我至少不能。