amCharts - шар не появляется на линейном графике - PullRequest
Новая
       6

amCharts - шар не появляется на линейном графике

0 голосов
/ 20 января 2019

Я пытаюсь объектно-ориентированный подход для создания 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" );

});

может кто-нибудь сказать мне, что я делаю неправильно?

1 Ответ

0 голосов
/ 21 января 2019

Линейные графики требуют добавления либо маркеров на график (graph.bullet = "round"; или любой другой формы) или курсора диаграммы (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>
...