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

Question

I have attached snippet for a dual Y axis chart.

The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0

Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).

Thank you as always to the experts out there!

 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

nothing out of the box will allow you to adjust the position of the point.

you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.

you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.

not much you can do, unless you disable tooltips.

see following working snippet,
hover the point to see it move...

 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>

best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...

the chart does provide mouseover and mouseout events,
not sure its worth the effort...