Amcharts XY图表不显示气球

时间:2014-11-22 23:08:24

标签: javascript amcharts balloon

我的图表没有显示气球,我不明白为什么。我在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 ...},

1 个答案:

答案 0 :(得分:0)

我在这里更新了你的小提琴......

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)"
    }
],

不确定您是否可以参考实际的字段名称,但在快速测试中我至少不能。