0
267
Vistas¿Cómo romper la línea en la información sobre herramientas usando el gráfico de Google?
Estoy tratando de romper una línea en el código a continuación, pero no puedo.
este es el codigo completo
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', {role: 'tooltip', p:{html:true}}], ['2010<br>September', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, 'start<br>end'], ]); var view = new google.visualization.DataView(data); //view.setColumns([ 1, 2, 3, 4, 5, 6, 7, 8, 9,10]); var options = { width: 900, height: 500, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '100%' }, isStacked: 'percent', tooltip: {isHtml:true}, series: { 0: { color: 'red' }, 1: { color: 'green' }, 2: { color: 'red' }, 3: { color: 'green' }, 4: { color: 'red' }, 5: { color: 'green' }, 6: { color: 'red' }, 7: { color: 'green' }, 8: { color: 'red' }, 9: { color: '#03254c' } } }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> </head> <body> <div id="barchart_values" style="width: 900px; height: 500px;"></div> </body> </html>Tenga en cuenta que puse un br para romper la línea, pero no funciona
'2010<br>September'Si tomo el rango al comienzo de la matriz, dará un error. Esto hace que no tenga la información sobre herramientas con el html habilitado.
[EDITAR] Probé poniendo 
 y no funcionó
¿Cómo rompo la línea?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Utilice white-space: pre-wrap; en el css y en el código use \n
google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable( [ ['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', { type: 'string', role: 'tooltip', 'p': { 'html': true } }], [ '2010\nSeptember', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, 'start\nend' ], ] ); var view = new google.visualization.DataView(data); var options = { width: 900, height: 500, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '100%' }, isStacked: 'percent', tooltip: { isHtml: true }, series: { 0: { color: 'red' }, 1: { color: 'green' }, 2: { color: 'red' }, 3: { color: 'green' }, 4: { color: 'red' }, 5: { color: 'green' }, 6: { color: 'red' }, 7: { color: 'green' }, 8: { color: 'red' }, 9: { color: '#03254c' } } }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } .google-visualization-tooltip { border: solid 1px #bdbdbd; border-radius: 2px; background-color: white; position: absolute; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); font-size: 11px; -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); font-family: arial; white-space: pre-wrap; } .google-visualization-tooltip div { padding:5px; } <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="barchart_values" style="width: 900px; height: 500px;"></div> </body> </html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta