Google可视化双Y轴图表将线与特定的条对齐

Question

我已为双Y轴图表附加了代码段。

“达标率”目标的橙色点对应于“达标率”目标的蓝色条。两者均已分配给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

开箱即用的任何内容都无法调整该点的位置。

您可以在图表的ready事件中手动移动它。
但是当用户悬停该点时，图表会将其移回原处。

当图表向后移动点时，您可以使用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事件，
不确定是否值得付出努力...