Google Charts JS标签文本对齐控件

Question

我第一次玩谷歌图表，并试图研究如何使一个日期范围在屏幕大小和标签空间可用方面都响应，这取决于数据点的数量。

我已经设法敲出一些示例代码在轴标签的换行，但标签似乎是中心对齐-有一种方法来左对齐吗?(或者有一个内置的方式来处理日期响应?)

var _count = 0;
var _months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

doTest();
function doTest() {
var dtT = '2010-01-01';
var data = document.getElementById('data');
data.innerHTML = '';
var a = 0;
var b = parseInt(document.getElementById('n').value);
_count = b;
var b0 = b;
for (var d = 0; d < b0; d++) {
var dt = new Date(dtT);
data.innerHTML += "['" + getLabel(dt) + "', " + a + "," + b + "],";
a++;
b--;
dt.setDate(dt.getDate() + 1) // tomorrow
dtT = dt.getFullYear() + '/' + getNN(dt.getMonth() + 1) + '/' + getNN(dt.getDate());
}
data.innerHTML = data.innerHTML.substr(0, data.innerHTML.length - 1);
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawAxisTickColors);
}
// ------------------------------------------------------------------------
function getNN(n) {
if (n < 10) return '0' + n;
return n;
}
// ------------------------------------------------------------------------
function getLabel(tx) {
var date = new Date(tx);
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getYear() - 100;
return d + ' \n' + _months[m - 1] + ' ' + y;
}
// ------------------------------------------------------------------------
function drawAxisTickColors() {
var ww = window.innerWidth;
var numOfdates = 35;
var tdString = document.getElementById('data').innerHTML;
var arr = eval("[" + tdString + "]");
var data = new google.visualization.DataTable();
data.addColumn('string', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var options_stacked = {
isStacked: true,
height: 300,
hAxis: {
slantedText: false,
showTextEvery: 7
},
legend: {
position: 'top',
maxLines: 3
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
}
window.addEventListener('resize', drawAxisTickColors);

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Google Charts Test</h1>
Columns:<input id='n' type='number' value='66'>
<input type='button' onClick='doTest()' value='Go'>
<div id="chart_div"></div>
<table style='display:none'>
<tr><td id="data"></td></tr>        
</table>

如果你想玩它，也有一个JSFiddle - https://jsfiddle.net/Abeeee/d5fojtp2/

Answer 1

好了，看起来就像把数据中的第一列作为字符串问题是;将其改为date(并调整测试数据生成器代码以适应)似乎允许图表自动处理间距和重叠(并消除标签对齐的问题)。注意:我还为hAxis数组添加了一个格式(format:'d/MMM/yy')控件。

var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');     <---- was string
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);

参见https://jsfiddle.net/Abeeee/d5fojtp2/25/获取工作代码。

但是请注意，当你有1或2个数据点时，这似乎仍然失败-失败的原因是列下的日期不正确。