В графике Google, как динамически показывать точки данных?

Question

Здесь я пытаюсь нарисовать график зависимости цены продажи от месяца за последние три года.Список данных поступает из баз данных текущего года, прошлого года и с прошлого по последний год.

Итак, я сделал массив данных, как показано ниже, из массива php-кода:

[
['January',  37.8, 80.8, 41.8],
['February',  30.9, 69.5, 32.4],
['March',  25.4,   57, 25.7],
['April',  11.7, 18.8, 10.5],
['May',  11.9, 17.6, 10.4],
['June',   8.8, 13.6,  7.7],
['July',   7.6, 12.3,  9.6],
['August',  12.3, 29.2, 10.6],
['September',  16.9, 42.9, 14.8],
['October', 12.8, 30.9, 11.6],
['November',  5.3,  7.9,  4.7],
['December',  6.6,  8.4,  5.2]
]

И затем передал его функции рисования Google-диаграммы с помощью параметра dataJson.см .:

<script type="text/javascript">
  let dataJson = '<?php echo $dataJson; ?>';
  var newData = JSON.parse((dataJson));

  google.charts.load('current', {'packages':['line']});
  var  data="";
  google.charts.setOnLoadCallback(salesChart);

  function salesChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Months');
    data.addColumn('number', '2019');
    data.addColumn('number', '2018');
    data.addColumn('number', '2017');
    data.addRows(newData);
    var options = {
    'title' : 'All over Sales',
      hAxis: {
        title: 'Month'
      },
      vAxis: {
        title: 'Selling Price'
      },
      width: 900,
      height: 500,
      curveType: 'function'
    };
    var chart = new google.charts.Line(document.getElementById('salesgraph'));
    chart.draw(data, google.charts.Line.convertOptions(options));
  }
  </script>
  <div id="salesgraph"></div>

Теперь график в порядке.Но точки данных должны быть видны на графике со значениями.Поэтому, пожалуйста, ведите меня.

введите описание изображения здесь

Answer 1

Изменено:

google.charts.load('current', {'packages':['line','corechart']});

и

data.addColumn('string', 'Months');
  data.addColumn('number', '2019');
  data.addColumn({type: 'number', role: 'annotation'});
  data.addColumn('number', '2018');
  data.addColumn({type: 'number', role: 'annotation'});
  data.addColumn('number', '2017');
  data.addColumn({type: 'number', role: 'annotation'});

и

var chart = new google.visualization.LineChart (document.getElementById ('salesgraph'));

и измените массив php следующим образом:

['January',  37.8,'37.8',  80.8,'80.8', 41.8,'41.8'],

Нажмите здесь, чтобы увидеть результат!

Answer 2

Попробуйте ниже.Вы должны добавить аннотации для отображения значений с точками вампиров.

[
['January',  37.8, 80.8, 41.8,41.8],
['February',  30.9, 69.5, 32.4,32.4],
['March',  25.4,   57, 25.7,25.7],
['April',  11.7, 18.8, 10.5,10.5],
['May',  11.9, 17.6, 10.4,10.4],
['June',   8.8, 13.6,  7.7,7.7],
['July',   7.6, 12.3,  9.6,9.6],
['August',  12.3, 29.2, 10.6,10.6],
['September',  16.9, 42.9, 14.8,14.8],
['October', 12.8, 30.9, 11.6,11.6],
['November',  5.3,  7.9,  4.7,4.7],
['December',  6.6,  8.4,  5.2,5.2]
] 


<script type="text/javascript">


  let dataJson = '<?php echo $dataJson; ?>';
  var newData = JSON.parse((dataJson));

  google.charts.load('current', {'packages':['line']});
  var  data="";
  google.charts.setOnLoadCallback(salesChart);

  function salesChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Months');
    data.addColumn('number', '2019');
    data.addColumn('number', '2018');
    data.addColumn('number', '2017');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addRows(newData);
    var options = {
    'title' : 'All over Sales',
      hAxis: {
        title: 'Month'
      },
      vAxis: {
        title: 'Selling Price'
      },
      width: 900,
      height: 500,
      curveType: 'function',
      pointSize: 5
    };
    var chart = new google.charts.Line(document.getElementById('salesgraph'));
    chart.draw(data, google.charts.Line.convertOptions(options));
  }
  </script>
  <div id="salesgraph"></div>

Answer 3

в вашем коде все выглядит нормально.единственное, чего не хватает, это pointSize в опциях.поэтому добавьте pointSize с желаемым размером точки, и вы сможете увидеть точки.

например: var options = { 'title' : 'All over Sales', hAxis: { title: 'Month' }, vAxis: { title: 'Selling Price' }, width: 900, height: 500, curveType: 'function', pointSize: 10, };

надеюсь, что это решит вашу проблему