javascript - Google 时间轴图表

标签 javascript charts google-visualization

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

最佳答案

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

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

当 'ready' 事件触发时，
我们在图表上找到了所有标签。 

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>

关于javascript - Google 时间轴图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59323869/

上一篇：dom - 是否有可靠的算法来生成健壮的 DOM 节点选择器，只给定目标节点？

下一篇：xpath - 关闭Google翻译中的弹出框

相关文章：

javascript - Vue 组件呈现为注释？

javascript - Google 图表中的链接 View

javascript - Highcharts 显示完整数字或任何格式而不是 k

javascript - Highcharts 饼图在空时显示轮廓

javascript - 带百分号的 Google Chart 垂直轴

javascript - 给定 DataTable 时，Google Charts draw() 方法类型错误

javascript - 如何使用 AJAX 完全关闭模式框？ - ASP.NET MVC

javascript - 在 node.js 中生成并终止一个进程

javascript - 针对每个类并返回一个字符串和类

javascript - 如何在 d3.js 中制作带有扩展网格的圆 Angular 条形图？

©2024 IT工具网  联系我们