Quiero mostrar diferentes textos en las marcas del eje x y en la información sobre herramientas, intenté configurar el objeto de marca en mis datos como {v: '2010', f: 'abc'}, pero el gráfico de columnas de Google usa la propiedad 'f' para ambos etiqueta de eje e información sobre herramientas. Quiero que use 'v' para información sobre herramientas y 'f' para etiquetas en el eje x. ¿Hay alguna opción disponible para lograr esto? A continuación se muestra mi ejemplo reproducible simple.
google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], [{v: '2010', f: 'abc'}, 10, 24, 20, 32, 18, 5, ''], [{v: '2020', f: 'deg'}, 16, 22, 23, 30, 16, 9, ''], [{v: '2030', f: 'ghi'}, 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, hAxis: { format: function (val) { console.log('val', val); } } }; var chart = new google.visualization.ColumnChart( document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>en lugar de usar una cadena para el valor: '2010'
necesitarás usar un número: 2010
esto te permitirá personalizar los ticks en las opciones...
hAxis: { ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}] } hAxis.ticks no funciona cuando el valor del eje x es una cadena
en cuanto a la información sobre herramientas, puede utilizar el valor numérico,
pero aquí, incluí la notación de objeto,
por lo que no se muestra una coma en la información sobre herramientas: 2,010
[{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''],ver siguiente fragmento de trabajo...
google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], [{v: 2010, f: '2010'}, 10, 24, 20, 32, 18, 5, ''], [{v: 2020, f: '2020'}, 16, 22, 23, 30, 16, 9, ''], [{v: 2030, f: '2030'}, 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, hAxis: { ticks: [{v: 2010, f: 'abc'}, {v: 2020, f: 'deg'}, {v: 2030, f: 'ghi'}] } }; var chart = new google.visualization.ColumnChart( document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>