我的图表没有显示气球,我不明白为什么。我在y光标上显示了一个气球,我可以将其更改为显示x轴的值,但是我无法显示一个气球,该气球会在x光标上或在值线后面的气球中显示x轴值。
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 ...},
答案 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)"
}
],
不确定您是否可以参考实际的字段名称,但在快速测试中我至少不能。