Как отобразить одну точку данных в области Google ИЛИ Линейный график

Question

Я перепробовал все возможные конфигурации, чтобы получить Google Area Chart для отображения одной точки, но ничего не помогло.Я также полностью открыт для любых решений, использующих линейную диаграмму Google , если она имеет заполненную область.Тем не менее, я не смог найти решение для этой работы с линейной диаграммой.

Уже пытался установить pointSize, а также условно установить pointSize, если есть только одна строка.Опробовано множество различных способов настройки диаграммы, включая.

var data = new google.visualization.DataTable();
data.addColumn('date', 'Updated');
data.addColumn('number', 'Amount');
data.addRow([new Date(1548266417060.704),100]);

И

var mets = [['Updated', 'Amount'], [new Date(1548266417060.704),100]];
var data = google.visualization.arrayToDataTable(mets);

---

Диаграмма области Пример JSFiddle

Линейная диаграмма Пример JSFiddle
Эта линейная диаграмма будет нуждаться в области под заполненной линией, но я не смог определить, как это сделатьтак с этим API

Пример диаграммы, которую я пытаюсь достичь с помощью CanvasJs , но я пытаюсь реализовать ее с помощью API визуализации Google и позволяют отображать одну точку, если на графике есть только одна точка .

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Updated', 'Amount'],
          [new Date(1548266417060.704),100],
          //[new Date(1548716961817.513),100],
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          pointSize: 5,
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

Я ожидаю, что диаграммаотображать одну точку, когда есть только одна строка данных.Как вы можете видеть по JSFiddle , когда есть один ряд, ничего не появляется, но как только вы раскомментируете второй ряд, все работает просто отлично.

Answer 1

существует ошибка с самой последней версией Google-карт,
, когда ось x является непрерывной осью (дата, число, не строка и т. Д.).),
и в таблице данных существует только одна строка,
вы должны установить явное окно просмотра на оси -> hAxis.viewWindow

, чтобы использовать тип даты только с одной строкой,
сначала используйте метод таблицы данных -> getColumnRange
, это вернет объект со свойствами min & max для оси x

, затем мы можем увеличить max и уменьшите min на один день,
и используйте это для нашего окна просмотра.

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Updated', 'Amount'],
    [new Date(1548266417060.704),100]
  ]);

  var oneDay = (24 * 60 * 60 * 1000);
  var dateRange = data.getColumnRange(0);
  if (data.getNumberOfRows() === 1) {
    dateRange.min = new Date(dateRange.min.getTime() - oneDay);
    dateRange.max = new Date(dateRange.max.getTime() + oneDay);
  }

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {color: '#333'},
      viewWindow: dateRange
    },
    pointSize: 5
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

вы заметите, если мы вернемся к старой версии ('45'),
строка с одной датой отобразится без проблем...

google.charts.load('45', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Updated', 'Amount'],
    [new Date(1548266417060.704),100]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {color: '#333'},
    },
    pointSize: 5
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

Я не знаю, поняли ли вы, но формат даты, который вы передаете, неправильный, поэтому, когда вы пишете Date (), он возвращает текущую дату в формате строки.

Теперь, если мы так много понимаем, тогда точный способ записи массива дат должен быть

   var data = google.visualization.arrayToDataTable([
      ['Updated', 'Amount'],
      [new Date(1548266417060.704).toString(),100],
    ]);

. Это вернет дату, отформатированную в виде строки.и библиотека примет его.

если вы все еще хотите передать объект, вам нужно указать столбец dataTable как Date.

для получения дополнительной информации прочитайте здесь

https://developers.google.com/chart/interactive/docs/datesandtimes