Question

我想问一下，Google时间线的haxis值（下面的日期如下）是否可能更改为字符串格式？

例如，10月30日将更改为第1周，11月6日至第2周，依此类推。

欢迎并赞赏任何帮助和建议。

提前致谢！

Answer 1

与核心图表相比，时间线图表非常有限

在可用选项和帮助方法中查找图表坐标等等......

但是像核心图表一样，时间轴会生成svg，可以使用javascript进行修改

请参阅以下工作代码段...

图表的'ready'事件触发后，所有的haxis标签都会被删除

然后为周数添加自定义标签

在删除所有标签之前，克隆一个标签，以保持相同的字体，颜色，y坐标等...

然后时间线条用于查找x坐标并添加新标签

＆＃13;

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({type: 'string', id: 'Category'});
    dataTable.addColumn({type: 'date', id: 'Start'});
    dataTable.addColumn({type: 'date', id: 'End'});
    dataTable.addRows([
      ['Category A', new Date(2016, 9, 30), new Date(2016, 10, 5)],
      ['Category B', new Date(2016, 10, 6),  new Date(2016, 10, 12)],
      ['Category C', new Date(2016, 10, 13),  new Date(2016, 10, 19)]
    ]);

    google.visualization.events.addListener(chart, 'ready', function () {
      var rowIndex = 0;      // data table row index
      var weekLabel = null;  // clone of text node - keep font settings, y-coord, etc...

      // remove haxis labels
      var labels = container.getElementsByTagName('text');
      while (labels.length > dataTable.getNumberOfRows()) {
        // ignore "category" labels
        if (dataTable.getFilteredRows([{column: 0, value: labels[labels.length - 1].innerHTML}]).length === 0) {
          if (weekLabel === null) {
            weekLabel = labels[labels.length - 1].cloneNode(true);
          }
          labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
        }
      }

      // use timeline bars to find x coordinate for week labels
      rowIndex = 0;
      var svgParent = container.getElementsByTagName('svg')[0];
      Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
        var bounds;  // bounding box of text element

        // ignore rect if not a timeline bar
        if (parseFloat(bar.getAttribute('x')) > 0) {
          weekLabel = weekLabel.cloneNode(true);
          weekLabel.innerHTML = 'Week ' + (rowIndex + 1);
          svgParent.appendChild(weekLabel);
          bounds = weekLabel.getBBox();
          weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
          rowIndex++;
        }
      });
    });

    chart.draw(dataTable);
  },
  packages:['timeline']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Answer 2

＆＃13;

    google.charts.load("current", {packages:["timeline"], callback: drawChart});

function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);

// hAxis put on top
google.visualization.events.addListener(chart, 'ready', afterDraw); 

// Link in tooltip
google.visualization.events.addListener(chart, 'select', function(e) { 
  var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
  if (chart.ttclone) {
    chart.ttclone.parentNode.removeChild(chart.ttclone)
  }
  chart.ttclone = tooltip.cloneNode(true);
  chart.ttclone.setAttribute('clone', true);
  chart.ttclone.style.pointerEvents = 'auto';
  tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
});

var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
// for colorMap
dataTable.addColumn({ type: 'string', id: 'Course' }); 
dataTable.addColumn({ type: 'string', id: 'Subject' });
dataTable.addColumn({ type: 'string', id: 'ToolTip', role: 'tooltip', p:{html:true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
	
	// Timeline Start 
	['Student 1', 'ENGR', 'Trigonometry', '<a href="link_to_subj_desc" target="_blank">Trigonometry</a>', new Date(2016, 9, 30), new Date(2016, 10, 06)],
	['Student 2', 'IT', 'DB Management', '<a href="link_to_subj_desc" target="_blank">DB Management</a>', new Date(2016, 9, 30), new Date(2016, 10, 13)],
	['Student 3', 'CS', 'Introduction to Programming', '<a href="link_to_subj_desc" target="_blank">Introduction to Programming</a>', new Date(2016, 9, 30), new Date(2016, 10, 27)],
]);  
	
var colors = [];
var colorMap = {
	ENGR:	'#2ECC71',	// Green
	IT:	'#E67E22',	// Brown
	CS:	'#9B59B6',	// Violet
}

for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
	colors.push(colorMap[dataTable.getValue(i, 1)]);
}

var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
	
var options = {
	timeline: { 
		groupByRowLabel: true,
		rowLabelStyle: {
			fontName: 'Century Gothic',
			fontSize: 14,
			color: '#333333',
			bold: 'true',
		},
		barLabelStyle: {
			fontName: 'Century Gothic',
fontSize: 11,
},
showRowLabels: true,
showBarLabels: true,
}, 
hAxis: {
minValue: new Date(2016, 9, 30),
maxValue: new Date(2017, 9, 28),
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: colors,
};



// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);

// Change HAxis labels to Week
google.visualization.events.addListener(chart, 'ready', function () {
  var rowIndex = 0;      // data table row index
  var weekLabel = null;  // clone of text node - keep font settings, y-coord, etc...

  // remove haxis labels
  var labels = container.getElementsByTagName('text');
  while (labels.length > dataTable.getNumberOfRows()) {
    // ignore "category" labels
    if (dataTable.getFilteredRows([{column: 5, value: labels[labels.length - 1].innerHTML}]).length === 0) {
      if (weekLabel === null) {
        weekLabel = labels[labels.length - 1].cloneNode(true);
      }
      labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
    }
  }

  

    // use timeline bars to find x coordinate for week labels
     rowIndex = 0;
      var svgParent = container.getElementsByTagName('svg')[0];
      Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
        var bounds;  // bounding box of text element

        // ignore rect if not a timeline bar
        if (parseFloat(bar.getAttribute('x')) > 0) {
          weekLabel = weekLabel.cloneNode(true);
          weekLabel.innerHTML = 'WW 70' + (rowIndex + 1);
          svgParent.appendChild(weekLabel);
          bounds = weekLabel.getBBox();
          weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
          rowIndex++;
        }
      }); 
    });
	
	chart.draw(
		view,
		options, 
		dataTable, {
			tooltip: {
				isHtml: true,
			},
			timeline: {
				showBarLabels: false,
			}
	});
}

// hAxis put on top
    function afterDraw() {
	var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
	document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
	document.getElementsByTagName("svg")[0].style.overflow = 'visible';
	var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
	g.setAttribute('transform','translate(0,-'+height+')');
	g = null;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google时间轴图表将HAxis更改为字符串值

2 个答案: