如何在Google区域或折线图上显示单个数据点

Question

我已经尝试了所有可能的配置,以获得谷歌区域图表显示单点但没有任何工作.只要它有一个填充区域,我对使用谷歌折线图的任何解决方案都完全开放.但是,我找不到使用折线图进行此工作的解决方案.

已经尝试设置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实现的图表示例,但我正在尝试使用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);
      }

当只有一个数据行时,我希望图表显示一个点.正如你所看到的那样,当有一行时没有任何东西出现,但只要你取消注释第二行,一切正常.

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>