Google диаграмма не показывает правильное поведение в php - PullRequest
Новая
       11

Google диаграмма не показывает правильное поведение в php

0 голосов
/ 25 февраля 2019

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

2019-02-22 12:05, 500
2019-02-22 12:15, 2
2019-02-22 12:19, 90

Поэтому я хочу показать это в виде графика.это мой код 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"><script>
</head>
<body>
  <div id="chart_div"></div>
 </body>
</html>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawAxisTickColors);

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Price');
  data.addColumn('datetime', 'Date');

  var dateArr2 = (<?php echo json_encode($dateArr); ?>);

  var number = (<?php echo json_encode($number); ?>);

  var length = Math.min(dateArr2.length, number.length);
  var rows = [];
  for (var i = 0; i < length; ++i) {
       rows.push([number[i], new Date(dateArr2[i]) ]);
  }

  data.addRows(rows);

  var options = {
  // backgroundColor: '#E4E4E4',
  curveType: 'function',
  chartArea: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0,
  width: "100%",
  height: "100%"
},
hAxis: {
  textPosition: 'none',
  baselineColor: 'none',
  gridlines: {
    color: 'none'
  },
},
vAxis: {
  textPosition: 'none',
  baselineColor: 'none',
  gridlines: {
    color: 'none'
  }
},
colors: ['#2098d4', '#ffffff'],
legend: 'none'
};

var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);
}
 </script>

и вот так выглядит моя база данных:

enter image description here

Но моя диаграмма выглядит так:

enter image description here

Что я делаю не так, пожалуйста, помогите.

РЕДАКТИРОВАТЬ

пробовал это: 

number = number.map(Number);

после 

var number = (<?php echo json_encode($number); ?>);

это результат:

enter image description here

1 Ответ

0 голосов
/ 25 февраля 2019

каждая диаграмма имеет определенный формат данных ,
для LineChart, первый столбец используется в качестве оси X,
каждый дополнительный столбец отображается на оси Y.

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

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Price');

и ... 

rows.push([new Date(dateArr2[i]), number[i]]);

ТАКЖЕ, вы используете старую версию диаграмм Google.
jsapi больше не должен использоваться, см. обновление кода загрузчика библиотеки ,
это будетизмените только оператор load.

от ... 

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawAxisTickColors);

до ... 

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

примечание: пакет line не нужен, он предназначен для материала диаграммы ... 

google.charts.Line

вы используете классический график ... 

google.visualization.LineChart
...