javascript - 如何在谷歌区域或折线图上显示单个数据点

Question

我已经尝试了所有可能的配置来获得 Google Area Chart显示一个点，但没有任何效果。我也完全接受使用 Google Line Chart 的任何解决方案。只要它有一个填充区域。但是，我也找不到使用折线图进行这项工作的解决方案。

已经尝试设置 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);

---

Area Chart Example JSFiddle

Line Chart Example JSFiddle
此折线图需要填充线下方的区域，但我无法确定如何使用此 API 执行此操作

Example of the chart I'm trying to achieve using CanvasJs但我正在尝试使用 Google Visualization API 实现它，并且如果图表上只有一个点，则允许显示一个点。

      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

最新版本的谷歌图表有一个错误，
当 x 轴是连续轴(日期、数字、非字符串等)时，
并且数据表中只有一行，
你必须在轴上设置一个显式 View 窗口 --> hAxis.viewWindow

使用只有一行的日期类型，
首先，使用数据表方法 --> getColumnRange
这将返回一个具有 x 轴 min 和 max 属性的对象

然后我们可以将max增加一天并将min减少一天，
并将其用于我们的 View 窗口。

请参阅以下工作片段...

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>