Tengo un gráfico de Google (gráfico de columnas) que muestra una sola columna con fecha (enero de 2010 = 2010-01-01), pero la columna resultante parece ejecutarse desde el 1 de julio de 2009 hasta el 1 de julio de 2010 (tenga en cuenta que parece cambiar según el ancho de la pantalla); ¿Cómo puedo arreglar esto para que la columna se asiente solo en la fecha del 1 de enero de 2010? (**Tenga en cuenta que las fechas/valores son variables y pueden incluir uno o cientos de valores de columna, por lo que NO PODEMOS simplemente codificar esto o cambiar el tipo de columna de 'fecha' a 'cadena').
var arr = eval("[[new Date(2010, 0, 1), 0,1]]"); var data = new google.visualization.DataTable(); data.addColumn('date', 'Dt'); data.addColumn('number', 'Open'); data.addColumn('number', 'Closed'); data.addRows(arr); var options_stacked = { isStacked: true, height: 300, colors: ['#111', '#a00'], hAxis: { slantedText: false, format: 'd/MMM/yy', }, legend: { position: 'top', }, vAxis: { minValue: 0 } }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options_stacked);Se puede encontrar un demostrador para esto en https://jsfiddle.net/Abeeee/d5fojtp2/34/
puede agregar marcas personalizadas para asegurarse de que cada columna "se asiente" en la fecha correcta.
la opción ticks espera una matriz de valores.
podemos usar el método DataTable --> getDistinctValue(colIndex)
para devolver los valores de fecha de la tabla de datos.
var xTicks = data.getDistinctValues(0); hAxis: { slantedText: false, format: 'd.MMM.yy', <---- changed from 'd/MMM/yy' to avoid line breaks ticks: xTicks },ver siguiente fragmento de trabajo...
function doTest() { var arr = eval("[[new Date(2010, 0, 1), 0,1]]"); var data = new google.visualization.DataTable(); data.addColumn('date', 'Dt'); data.addColumn('number', 'Open'); data.addColumn('number', 'Closed'); data.addRows(arr); var xTicks = data.getDistinctValues(0); var options_stacked = { isStacked: true, height: 300, colors: ['#111', '#a00'], hAxis: { slantedText: false, format: 'd/MMM/yy', ticks: xTicks }, legend: { position: 'top', }, vAxis: { minValue: 0 } }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options_stacked); } window.addEventListener('resize', doTest); google.charts.load('current', { packages: ['corechart', 'bar'] }); google.charts.setOnLoadCallback(doTest); <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <h1>Google Charts</h1> <div id="chart_div"></div>