时间戳

首页 > 解决方案 > 如何在谷歌区域或折线图上显示单个数据点

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

问题描述

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

如果只有一行，已经尝试设置 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);
      }

当只有一个数据行时，我希望图表显示一个点。正如您在JSFiddle中看到的那样，当只有一行时，什么都没有出现，但是一旦您取消注释第二行，一切就正常了。

标签： javascriptgoogle-visualization

解决方案

google chart最新版本有个bug
， 当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>

推荐阅读