У меня есть диаграмма линии google, созданная для отображения значений на основе временных интервалов. Вот моя полная настройка графика:
var inputData = [[1990,5335293,"Jan 1990\n5,335,293"],[1990,5309932,"Feb 1990\n5,309,932"],[1990,5327306,"Mar 1990\n5,327,306"],[1990,5354168,"Apr 1990\n5,354,168"],[1990,5394006,"May 1990\n5,394,006"],[1990,5448990,"Jun 1990\n5,448,990"],[1990,5474112,"Jul 1990\n5,474,112"],[1990,5446876,"Aug 1990\n5,446,876"],[1990,5382558,"Sep 1990\n5,382,558"],[1990,5410053,"Oct 1990\n5,410,053"],[1990,5399647,"Nov 1990\n5,399,647"],[1990,5386422,"Dec 1990\n5,386,422"]] ;
var month = "All Months" ;
if (month == "All Months") {
var b = [];
for (i=0; i < inputData.length; i++) {
var year_with_month = inputData[i][0] + i * 1/12;
var e = [year_with_month, inputData[i][1], inputData [i][2]]
b.push(e);
}
inputData = b;
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn('number', month);
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows(inputData);
var formatter = new google.visualization.NumberFormat({groupingSymbol: ',', fractionDigits: '0'});
formatter.format(data, 1);
var options = {
tooltip: {textStyle: {bold: 'false', color: 'black'}},
legend: {position: 'none'},
hAxis: {title: 'Year', format: '####', viewWindowMode:'maximized'},
vAxis: {title: 'Number in Labor Force'},
colors:['green'],
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Я использую оператор if, чтобы изменить каждый 1-й элемент в массиве, чтобы добавить 1/12 в зависимости от того, какой он месяц. Строка и сам график отлично смотрятся. Тем не менее, мои интервалы хакса даже не близки к правильному. Когда я смотрю на свой график, три из интервалов оси h - это 1991 год. Линия проходит через каждый из этих интервалов, но, как вы можете видеть, ни одно из значений данных никогда не становилось в 1991 году. Я предполагаю, что я говорю, как сделать Я изменяю эти значения haxis, чтобы они совпадали с моими точками данных, а не были неправильными?
Лучше всего использовать ось типа "дата" вместо типа "число" и вводить ваши данные как объекты Date, например:
var inputData = [[1990,5335293,"Jan 1990\n5,335,293"],[1990,5309932,"Feb 1990\n5,309,932"],[1990,5327306,"Mar 1990\n5,327,306"],[1990,5354168,"Apr 1990\n5,354,168"],[1990,5394006,"May 1990\n5,394,006"],[1990,5448990,"Jun 1990\n5,448,990"],[1990,5474112,"Jul 1990\n5,474,112"],[1990,5446876,"Aug 1990\n5,446,876"],[1990,5382558,"Sep 1990\n5,382,558"],[1990,5410053,"Oct 1990\n5,410,053"],[1990,5399647,"Nov 1990\n5,399,647"],[1990,5386422,"Dec 1990\n5,386,422"]] ;
var month = "All Months" ;
if (month == "All Months") {
var b = [];
for (i=0; i < inputData.length; i++) {
var d = new Date(inputData[i][0], i, 1);
var e = [d, inputData[i][1], inputData [i][2]];
b.push(e);
}
inputData = b;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', month);
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows(inputData);
var formatter = new google.visualization.NumberFormat({groupingSymbol: ',', fractionDigits: 0});
formatter.format(data, 1);
var options = {
tooltip: {textStyle: {bold: 'false', color: 'black'}},
legend: {position: 'none'},
hAxis: {title: 'Year', format: 'MMM yyyy', viewWindowMode:'maximized'},
vAxis: {title: 'Number in Labor Force'},
colors:['green']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
Это также позволит вам пропустить ваши собственные всплывающие подсказки, поскольку даты могут быть отформатированы так, как вы хотите:
var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM yyyy'});
dateFormatter.format(data, 0);
См. Рабочий пример на основе вашего кода здесь: http://jsfiddle.net/asgallant/XdncE/