2

Tengo este código

    <script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
      var data = google.visualization.arrayToDataTable([
        ['Ventas', 'Ventas Totales de Marzo', { role: 'style' }, 'Ventas faltantes para la Meta', { role: 'style'  }],
        //['', 50, 250 ],
        ['Ventas', 10, '#CE023F', 20,  '#102A47'],
      ]);
      var options = {
        title: '',
        legend: { position: 'top', maxLines: 2},
        colors: ['#CE023F', '#102A47',],
        chartArea: {width: '60%'},
        isStacked: true,
        hAxis: {
          title: ' ',
          minValue: 0,
        },
        vAxis: {
          title: ' '
        },
        backgroundColor: 'transparent',
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_Ventas'));
      chart.draw(data,options);
    }
</script>

Necesito que aparezca una línea vertical roja en el punto 30. Me ayudan de favor?

https://jsfiddle.net/rthz1jkx/

1 respuesta 1

1

Modifiqué tu jsfiddle original para incluir la línea; puedes verlo aquí. Básicamente utilicé una funcionalidad del mismo API de Google Charts para dibujar elementos sobrepuestos (overlays) sobre las gráficas. Puedes leer dicha documentación aquí.

Es probable que tengas que ajustar el código CSS para posicionar el div (#vert_marker) de acuerdo a tu situación real (y no dentro del jsfiddle), pero en general debería funcionar porque la función placeMarker obtiene la ubicación final del mismo gráfico, independientemente de dónde se pinte. Para probar lo anterior puedes cambiar las opciones para que utilice un ancho mayor (en vez del 60% especificado) y debería dibujarse la línea roja correctamente. Por ejemplo:

chartArea: {
  width: '90%'
},

Nota: Si deseas cambiar el ancho de la línea, color y/o altura, simplemente cambia las propiedades correspondientes en el CSS (en este caso width, background-color y height) por los valores deseados.

Espero que te funcione. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.