Punto de mira

Stay organized with collections Save and categorize content based on your preferences.

Descripción general

Las marcas de mira son líneas finas verticales y horizontales centradas en un dato en un gráfico. Cuando tú, como creador de gráficos, habilitas la cruz en tus gráficos, tus usuarios podrán orientar a un solo elemento:

Las marcas de cruz pueden aparecer en el foco, en la selección o en ambas. Están disponibles para gráficos de dispersión, gráficos de líneas, gráficos de áreas y para las partes de líneas y áreas de gráficos combinados.

Un ejemplo simple

Desplázate sobre los puntos que aparecen a continuación o selecciona los puntos de mira para verlos:

A continuación, se muestra una página web completa que crea el gráfico anterior, con la línea de cruz en negrita:

<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 = new google.visualization.DataTable();
        data.addColumn('number');
        data.addColumn('number');
        for (var i = 0; i < 100; i++)
          data.addRow([Math.floor(Math.random()*100),
                       Math.floor(Math.random()*100)]);
        var options = {
          legend: 'none',
          crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.
        };
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Opciones de mira

Se encuentran disponibles las siguientes opciones de puntos de mira:

crosshair: { trigger: 'both' } mostrar tanto en el enfoque como en la selección
crosshair: { trigger: 'focus' } mostrar solo el enfoque
crosshair: { trigger: 'selection' } mostrar solo en la selección
crosshair: { orientation: 'both' } mostrar pelos horizontales y verticales
crosshair: { orientation: 'horizontal' } mostrar solo vellos horizontales
crosshair: { orientation: 'vertical' } mostrar solo pelos verticales
crosshair: { color: color_string } establecer color de cruz en color_string, p.ej., 'red' o '#f00'
crosshair: { opacity: opacity_number } establecer la opacidad de la mira en opacity_number, con 0.0 transparente y 1.0 totalmente opaco
crosshair: { focused: { color: color_string } } Establecer color de cruz en color_string en el enfoque
crosshair: { focused: { opacity: opacity_number } } Establecer la opacidad de la mira en opacity_number en el enfoque
crosshair: { selected: { color: color_string } } establecer el color de cruz en color_string en la selección
crosshair: { selected: { opacity: opacity_number } } configurar la opacidad de la mira en opacity_number en la selección