Question

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

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

这是我的方法

  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（chart.chartCursor = new AmCharts.ChartCursor();或其他形状）或chart cursor（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>

{{1}}

amCharts-气球未显示在折线图上

1 个答案: