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]);

AND

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

有一个 bug ，其中包含Google图表的最新版本，
当x轴是连续轴（日期，数字，而非字符串等）时，
数据表中只有一行，
您必须在轴上设置显式视图窗口-> hAxis.viewWindow

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

然后我们可以增加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

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

2 个答案: