Google визуализация двойной оси Y диаграммы выравнивания линии с определенной полосой

Question

Я добавил фрагмент для двойной оси Y.

Оранжевая точка для Ontime% Goal соответствует синей полосе для Ontime%. Оба были назначены на targetAxisIndex: 0

Могу ли я сдвинуть / переместить точку, чтобы выровнять ее над синей полосой? (см. прикрепленное изображение для желаемой позиции).

Как всегда, спасибо экспертам!

    google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
          ['AE', 90, 500, 100]
         
        ]);

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0,  type: 'bars'},
            1: {targetAxisIndex: 1,  type: 'bars'}, 
            2: {targetAxisIndex: 0,  type: 'line',  pointSize: 8, pointShape: { type: 'circle' } }, 
          },
          title: 'Ontime % on the left, Count on the right',
          bar:{
           width: "60%"
          },
          vAxis: {
          	minValue: 0
          },
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Ontime %'},
            1: {title: 'Count'}
          }
        };

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawClassicChart();
    };

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>

Answer 1

Ничто из коробки не позволит вам отрегулировать положение точки.

вы можете переместить его вручную, при событии готовности графика.
, но график переместит его назад, когда пользователь наведет курсор на точку.

Вы можете использовать MutationObserver, чтобы переместить точку, когда график перемещает ее назад,
, но это просто заставит ее мигать с одного места на другое, пока оно находится на поверхности.

не так много, что вы можете сделать, если вы не отключите всплывающие подсказки.

см. Следующий рабочий фрагмент,
наведите курсор на точку, чтобы увидеть ее перемещение ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  //var button = document.getElementById('change-chart');
  var chartDiv = document.getElementById('chart_div');

  var data = google.visualization.arrayToDataTable([
    ['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
    ['AE', 90, 500, 100]
  ]);

  var classicOptions = {
    width: 900,
    series: {
      0: {targetAxisIndex: 0,  type: 'bars'},
      1: {targetAxisIndex: 1,  type: 'bars'},
      2: {
        targetAxisIndex: 0,
        type: 'line',
        pointSize: 8,
        pointShape: {type: 'circle'},
      },
    },
    title: 'Ontime % on the left, Count on the right',
    bar:{
     width: "60%"
    },
    vAxis: {
      minValue: 0
    },
    vAxes: {
      0: {title: 'Ontime %'},
      1: {title: 'Count'}
    }
  };

  function drawClassicChart() {
    var classicChart = new google.visualization.ColumnChart(chartDiv);
    google.visualization.events.addListener(classicChart, 'ready', function () {
      var chartLayout = classicChart.getChartLayoutInterface();
      var bounds = chartLayout.getBoundingBox('bar#0#0');
      var observer = new MutationObserver(function () {
        var circles = chartDiv.getElementsByTagName('circle');
        if (circles.length > 1) {
          circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
        }
      });
      observer.observe(chartDiv, {
        childList: true,
        subtree: true
      });
    });
    classicChart.draw(data, classicOptions);
    //button.innerText = 'Change to Material';
    //button.onclick = drawMaterialChart;
  }

  drawClassicChart();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

В лучшем случае вы можете отключить всплывающие подсказки диаграммы,
, затем добавить свои собственные подсказки,
для точки и столбцов и т. Д...

на графике представлены события mouseover и mouseout,
не уверен, стоит ли усилий ...