Question

我需要一个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>

Answer 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++;
  }
});

请参阅以下工作片段...

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>

Google时间轴图表轴

1 个答案: