javascript - amCharts - 气球未出现在折线图上

Question

我正在尝试基于对象的方法来创建 amChart-graphs

无论我做什么，我都无法让气球显示在我的折线图中。如果我将其切换为柱形图，则会显示气球。

这是我的方法

  AmCharts.ready( function() {
  // init wrapper
  var chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  chart.categoryField = "date";

  // config baloon
  var balloon = chart.balloon;    
  balloon.adjustBorderColor = true;
  balloon.color = "#000000";
  balloon.cornerRadius = 5;
  balloon.fillColor = "#FFFFFF";

  var graph = new AmCharts.AmGraph();
  graph.valueField = "value";
  graph.balloonText = "[[category]]: <b>[[value]]</b>";
  graph.type = "column";
  chart.addGraph( graph ); 

  var categoryAxis = chart.categoryAxis;
  categoryAxis.autoGridCount  = false;
  categoryAxis.gridCount = chartData.length;
  categoryAxis.gridPosition = "start";

  var chartScrollbar = new AmCharts.ChartScrollbar();
  chart.addChartScrollbar(chartScrollbar);

  chart.write( "graphMonitor" );

});

有人可以告诉我我做错了什么吗？

Answer 1

折线图要求您添加 bullets到你的图表(graph.bullet = "round"; 或任何形状)或 chart cursor (chart.chartCursor = new AmCharts.ChartCursor();) 用于显示气球。选择最适合您的用例的方法。

var chartData = getData();
// init wrapper
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";

// config baloon
var balloon = chart.balloon;
balloon.adjustBorderColor = true;
balloon.color = "#000000";
balloon.cornerRadius = 5;
balloon.fillColor = "#FFFFFF";

var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.balloonText = "[[category]]: <b>[[value]]</b>";
graph.type = "line";
graph.bullet = "round";
chart.addGraph(graph);

var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount = false;
categoryAxis.parseDates = true;
categoryAxis.gridCount = chartData.length;
categoryAxis.gridPosition = "start";

var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);

//chart.chartCursor = new AmCharts.ChartCursor(); //alternative solution for balloons

chart.write("graphMonitor");

function getData() {
  var data = [];
  var firstDate = new Date();
  var newDate;
  firstDate.setDate(firstDate.getDate() - 10);
  for (var i = 0; i < 10; ++i) {
    newDate = new Date(firstDate);
    newDate.setDate(i);
    data.push({
      "date": newDate, 
      "value": Math.floor(Math.random() * 20 + 10)
    });
  }
  return data;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="graphMonitor" style="width: 100%; height: 300px"></div>