谷歌时间线图表轴答案

【问题标题】：Google Timeline Chart Haxis谷歌时间线图表轴
【发布时间】：2019-12-13 13:48:25
【问题描述】：

我需要一个hAxis，从 0 到最大值（比如说 130）。时间线图表几乎解决了我的问题，最初我的数据是以小时为单位的，但我必须在几秒钟内转换它。这很好，但它在数字 60 之后重置并从 0 重新开始。

看到这张图片：

因此我的问题是：有没有办法让xAxis 递增到最大值或某个值并且不重置？

  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
 

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Máquina' });
    dataTable.addColumn({ type: 'string', id: 'NºEncomenda' });
    dataTable.addColumn({ type: 'number', id: 'Inicio' });
    dataTable.addColumn({ type: 'number', id: 'Fim' });
    dataTable.addRows([
	

['Repuxagem 1001 ', '20194053 ', 0,4000],
['Estampagem Topo ', '20194053 ', 4000,33000],
['Estampagem Lado ', '20194053 ', 4000,33000],
['Recartilhado 1005 ', '20194053 ', 33000,37000],
['Recartilhado 3001 ', '20194054 ', 7000,9000],
['Calf 2 ', '20194054 ', 17000,21000],
['Recartilhado 3005 ', '20194054 ', 21000,23000],
['Repuxagem 1001 ', '20194063 ', 7000,11000],
['Calf2 ', '20194063 ', 11000,17000],
['Recartilhado 3005 ', '20194063 ', 17000,21000],
['Repuxagem 1001 ', '20194206 ', 11000,14000],
['Impressão Topo ', '20194206 ', 11000,14000],
['Calf1 ', '20194206 ', 15000,20000],
['Recartilhado 1005 ', '20194206 ', 20000,23000],
['Repuxagem 2001 ', '20194315 ', 9000,12000],
['Recartilhado 2005 ', '20194315 ', 9000,13000],
['Repuxagem 2001 ', '20194316 ', 8000,9000],
['Calf1 ', '20194316 ', 20000,21000],
['Recartilhado 2005 ', '20194316 ', 21000,22000],
['Recartilhado 3001 ', '20194351 ', 9000,11000],
['Recartilhado 3005 ', '20194351 ', 9000,11000],
['Repuxagem 1001 ', '20194361 ', 29000,33000],
['Calf1 ', '20194361 ', 49000,55000],
['Recartilhado 1005 ', '20194361 ', 55000,59000],
['Recartilhado 3001 ', '20194435 ', 30000,31000],
['Recartilhado 3005 ', '20194435 ', 30000,31000],
['Repuxagem 2001 ', '20194172 ', 1000,5000],
['Calf2 ', '20194172 ', 5000,11000],
['Recartilhado 3005 ', '20194172 ', 11000,15000],
['265 ', '20194172 ', 15000,43000],
['Recartilhado 1005 ', '20194172 ', 43000,47000],
['Repuxagem 2001 ', '20194223 ', 5000,8000],
['Calf1 ', '20194223 ', 11000,15000],
['Recartilhado 2005 ', '20194223 ', 15000,18000],
['322 ', '20194223 ', 37000,60000],
['Recartilhado 1005 ', '20194223 ', 60000,63000],
['Repuxagem 1001 ', '20194224 ', 4000,7000],
['Calf1 ', '20194224 ', 7000,11000],
['Recartilhado 1005 ', '20194224 ', 11000,14000],
['322 ', '20194224 ', 14000,37000],
['Recartilhado 1005 ', '20194224 ', 37000,40000],
['Recartilhado 3001 ', '20194257 ', 11000,15000],
['Estampagem Topo ', '20194257 ', 33000,71000],
['Estampagem Lado ', '20194257 ', 33000,71000],
['Recartilhado 2005 ', '20194257 ', 71000,75000],
['Repuxagem 2001 ', '20194392 ', 33000,39000],
['Recartilhado 2005 ', '20194392 ', 33000,39000],
['Recartilhado 3001 ', '20194269 ', 31000,35000],
['Recartilhado 3005 ', '20194269 ', 31000,35000],
['Repuxagem 1001 ', '20194330 ', 14000,18000],
['Impressão Topo ', '20194330 ', 14000,18000],
['Calf1 ', '20194330 ', 21000,27000],
['Estampagem Lado ', '20194330 ', 71000,99000],
['Recartilhado 1005 ', '20194330 ', 99000,103000],
['Recartilhado 3001 ', '20194398 ', 29000,30000],
['Calf2 ', '20194398 ', 64000,66000],
['Recartilhado 3005 ', '20194398 ', 66000,67000],
['Repuxagem 2001 ', '20194400 ', 31000,33000],
['Recartilhado 2005 ', '20194400 ', 31000,33000],
['Recartilhado 3001 ', '20194389 ', 0,7000],
['Serigrafia de Corpo ', '20194389 ', 10000,68000],
['Recartilhado 3005 ', '20194389 ', 68000,75000],
['Repuxagem 1001 ', '20190245 ', 18000,29000],
['Impressão Topo ', '20190245 ', 18000,29000],
['Calf2 ', '20190245 ', 45000,64000],
['Recartilhado 1005 ', '20190245 ', 64000,75000],
['Recartilhado 3001 ', '20190246 ', 15000,26000],
['Calf2 ', '20190246 ', 26000,45000],
['Recartilhado 3005 ', '20190246 ', 45000,56000],
['Repuxagem 1001 ', '20194391 ', 33000,36000],
['Impressão Topo ', '20194391 ', 33000,36000],
['Calf1 ', '20194391 ', 61000,65000],
['Recartilhado 2005 ', '20194391 ', 65000,68000],
['Repuxagem 2001 ', '20194426 ', 27000,31000],
['Calf1 ', '20194426 ', 55000,61000],
['Recartilhado 3005 ', '20194426 ', 61000,65000],
['Repuxagem 2001 ', '20194431 ', 12000,16000],
['Serigrafia de Corpo ', '20194431 ', 68000,103000],
['Recartilhado 3005 ', '20194431 ', 103000,107000],
['Repuxagem 2001 ', '20194432 ', 0,1000],
['Serigrafia de Corpo ', '20194432 ', 1000,10000],
['Recartilhado 1005 ', '20194432 ', 10000,11000],
['Recartilhado 3001 ', '20194271 ', 26000,29000],
['Calf1 ', '20194271 ', 45000,49000],
['Serigrafia de Corpo ', '20194271 ', 103000,121000],
['Recartilhado 3005 ', '20194271 ', 121000,124000],
['Repuxagem 2001 ', '20194271 ', 16000,27000],
['Calf1 ', '20194271 ', 27000,45000],
['Recartilhado 2005 ', '20194271 ', 45000,56000]]);




    

    chart.draw(dataTable);
  }

<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3.1" style="height: 1200px; width:4000px;"></div>
</html>

【问题讨论】：

抱歉我忘记上传这张图片了：ibb.co/LQ3ZHBb
不幸的是，时间线需要日期值，而不是数字。没有可以更改的选项来纠正问题。您可以在图表的 'ready' 事件中手动更改 svg <text> 元素的值...
在哪里可以找到这样的例子？我是编码新手...

标签： javascript charts google-visualization

【解决方案1】：

时间线需要日期值，而不是数字值。
因此，您无法更改任何选项来解决问题。
但我们可以手动更改 svg 元素的值，
在图表的“就绪”事件中。

google.visualization.events.addListener(chart, 'ready', function () {
...

当“就绪”事件触发时，
我们找到图表上的所有标签。

var labels = container.getElementsByTagName('text');

但我们只需要 x 轴上的标签。
在时间轴图中，默认情况下，x 轴标签是唯一的黑色 (#000000)

所以我们使用fill 属性来确保标签在x 轴上。

  // find x-axis labels by fill attribute
  if (label.getAttribute('fill') === '#000000') {
  ...

然后我们计算每个标签如何递增（2、10 等），
测试下一个标签是否小于上一个，
如果是这样，请更改标签...

var incrementBy;
var valueCurrent;
var valueLast;
var labelIndex = 0;
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
  // find x-axis labels by fill attribute
  if (label.getAttribute('fill') === '#000000') {
    valueCurrent = parseInt(label.textContent);

    if (labelIndex === 1) {
      incrementBy = valueCurrent - valueLast;
    }

    if (labelIndex > 0) {
      if (valueCurrent < valueLast) {
        valueCurrent = valueLast + incrementBy;
        label.textContent = valueCurrent;
      }
    }

    valueLast = valueCurrent;
    labelIndex++;
  }
});

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('example3.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Máquina' });
  dataTable.addColumn({ type: 'string', id: 'NºEncomenda' });
  dataTable.addColumn({ type: 'number', id: 'Inicio' });
  dataTable.addColumn({ type: 'number', id: 'Fim' });
  dataTable.addRows([
    ['Repuxagem 1001 ', '20194053 ', 0,4000],
    ['Estampagem Topo ', '20194053 ', 4000,33000],
    ['Estampagem Lado ', '20194053 ', 4000,33000],
    ['Recartilhado 1005 ', '20194053 ', 33000,37000],
    ['Recartilhado 3001 ', '20194054 ', 7000,9000],
    ['Calf 2 ', '20194054 ', 17000,21000],
    ['Recartilhado 3005 ', '20194054 ', 21000,23000],
    ['Repuxagem 1001 ', '20194063 ', 7000,11000],
    ['Calf2 ', '20194063 ', 11000,17000],
    ['Recartilhado 3005 ', '20194063 ', 17000,21000],
    ['Repuxagem 1001 ', '20194206 ', 11000,14000],
    ['Impressão Topo ', '20194206 ', 11000,14000],
    ['Calf1 ', '20194206 ', 15000,20000],
    ['Recartilhado 1005 ', '20194206 ', 20000,23000],
    ['Repuxagem 2001 ', '20194315 ', 9000,12000],
    ['Recartilhado 2005 ', '20194315 ', 9000,13000],
    ['Repuxagem 2001 ', '20194316 ', 8000,9000],
    ['Calf1 ', '20194316 ', 20000,21000],
    ['Recartilhado 2005 ', '20194316 ', 21000,22000],
    ['Recartilhado 3001 ', '20194351 ', 9000,11000],
    ['Recartilhado 3005 ', '20194351 ', 9000,11000],
    ['Repuxagem 1001 ', '20194361 ', 29000,33000],
    ['Calf1 ', '20194361 ', 49000,55000],
    ['Recartilhado 1005 ', '20194361 ', 55000,59000],
    ['Recartilhado 3001 ', '20194435 ', 30000,31000],
    ['Recartilhado 3005 ', '20194435 ', 30000,31000],
    ['Repuxagem 2001 ', '20194172 ', 1000,5000],
    ['Calf2 ', '20194172 ', 5000,11000],
    ['Recartilhado 3005 ', '20194172 ', 11000,15000],
    ['265 ', '20194172 ', 15000,43000],
    ['Recartilhado 1005 ', '20194172 ', 43000,47000],
    ['Repuxagem 2001 ', '20194223 ', 5000,8000],
    ['Calf1 ', '20194223 ', 11000,15000],
    ['Recartilhado 2005 ', '20194223 ', 15000,18000],
    ['322 ', '20194223 ', 37000,60000],
    ['Recartilhado 1005 ', '20194223 ', 60000,63000],
    ['Repuxagem 1001 ', '20194224 ', 4000,7000],
    ['Calf1 ', '20194224 ', 7000,11000],
    ['Recartilhado 1005 ', '20194224 ', 11000,14000],
    ['322 ', '20194224 ', 14000,37000],
    ['Recartilhado 1005 ', '20194224 ', 37000,40000],
    ['Recartilhado 3001 ', '20194257 ', 11000,15000],
    ['Estampagem Topo ', '20194257 ', 33000,71000],
    ['Estampagem Lado ', '20194257 ', 33000,71000],
    ['Recartilhado 2005 ', '20194257 ', 71000,75000],
    ['Repuxagem 2001 ', '20194392 ', 33000,39000],
    ['Recartilhado 2005 ', '20194392 ', 33000,39000],
    ['Recartilhado 3001 ', '20194269 ', 31000,35000],
    ['Recartilhado 3005 ', '20194269 ', 31000,35000],
    ['Repuxagem 1001 ', '20194330 ', 14000,18000],
    ['Impressão Topo ', '20194330 ', 14000,18000],
    ['Calf1 ', '20194330 ', 21000,27000],
    ['Estampagem Lado ', '20194330 ', 71000,99000],
    ['Recartilhado 1005 ', '20194330 ', 99000,103000],
    ['Recartilhado 3001 ', '20194398 ', 29000,30000],
    ['Calf2 ', '20194398 ', 64000,66000],
    ['Recartilhado 3005 ', '20194398 ', 66000,67000],
    ['Repuxagem 2001 ', '20194400 ', 31000,33000],
    ['Recartilhado 2005 ', '20194400 ', 31000,33000],
    ['Recartilhado 3001 ', '20194389 ', 0,7000],
    ['Serigrafia de Corpo ', '20194389 ', 10000,68000],
    ['Recartilhado 3005 ', '20194389 ', 68000,75000],
    ['Repuxagem 1001 ', '20190245 ', 18000,29000],
    ['Impressão Topo ', '20190245 ', 18000,29000],
    ['Calf2 ', '20190245 ', 45000,64000],
    ['Recartilhado 1005 ', '20190245 ', 64000,75000],
    ['Recartilhado 3001 ', '20190246 ', 15000,26000],
    ['Calf2 ', '20190246 ', 26000,45000],
    ['Recartilhado 3005 ', '20190246 ', 45000,56000],
    ['Repuxagem 1001 ', '20194391 ', 33000,36000],
    ['Impressão Topo ', '20194391 ', 33000,36000],
    ['Calf1 ', '20194391 ', 61000,65000],
    ['Recartilhado 2005 ', '20194391 ', 65000,68000],
    ['Repuxagem 2001 ', '20194426 ', 27000,31000],
    ['Calf1 ', '20194426 ', 55000,61000],
    ['Recartilhado 3005 ', '20194426 ', 61000,65000],
    ['Repuxagem 2001 ', '20194431 ', 12000,16000],
    ['Serigrafia de Corpo ', '20194431 ', 68000,103000],
    ['Recartilhado 3005 ', '20194431 ', 103000,107000],
    ['Repuxagem 2001 ', '20194432 ', 0,1000],
    ['Serigrafia de Corpo ', '20194432 ', 1000,10000],
    ['Recartilhado 1005 ', '20194432 ', 10000,11000],
    ['Recartilhado 3001 ', '20194271 ', 26000,29000],
    ['Calf1 ', '20194271 ', 45000,49000],
    ['Serigrafia de Corpo ', '20194271 ', 103000,121000],
    ['Recartilhado 3005 ', '20194271 ', 121000,124000],
    ['Repuxagem 2001 ', '20194271 ', 16000,27000],
    ['Calf1 ', '20194271 ', 27000,45000],
    ['Recartilhado 2005 ', '20194271 ', 45000,56000]
  ]);

  // re-label x-axis
  google.visualization.events.addListener(chart, 'ready', function () {
    var incrementBy;
    var valueCurrent;
    var valueLast;
    var labelIndex = 0;
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // find x-axis labels by fill attribute
      if (label.getAttribute('fill') === '#000000') {
        valueCurrent = parseInt(label.textContent);

        if (labelIndex === 1) {
          incrementBy = valueCurrent - valueLast;
        }

        if (labelIndex > 0) {
          if (valueCurrent < valueLast) {
            valueCurrent = valueLast + incrementBy;
            label.textContent = valueCurrent;
          }
        }

        valueLast = valueCurrent;
        labelIndex++;
      }
    });
  });

  chart.draw(dataTable);
});

<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example3.1" style="height: 1200px; width:4000px;"></div>
</html>

【讨论】：

先生，谢谢！这肯定会帮助我！谢谢。