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

2019-05-22 15:22:22 阅读：441 来源： 互联网

我已经尝试了每种配置都可以让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中看到的那样,只有一行没有出现,但是一旦取消注释第二行,一切正常.

解决方法:

谷歌排行榜的最新版本有一个错误,
当x轴是连续轴(日期,数字,而不是字符串等)时,
并且数据表中只存在一行,
您必须在轴上设置显式视图窗口 – > hAxis.viewWindow

使用只有一行的日期类型,
首先,使用数据表方法 – > getColumnRange
这将返回一个带有min&的对象. x轴的最大属性

然后我们可以增加最大值并将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>

标签：javascript,google-visualization
来源： https://codeday.me/bug/20190522/1152412.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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