Диаграмма Google visualization с двумя осями Y выравнивает линию по определенной полосе

ProgramBox

Диаграмма Google visualization с двумя осями Y выравнивает линию по определенной полосе

Post author:admin
Запись опубликована:25 мая, 2023
Post category:Вопросы по программированию

#javascript #google-visualization

#javascript #google-визуализация

Вопрос:

Я прикрепил фрагмент для диаграммы с двумя осями Y.

Оранжевая точка для цели Ontime% соответствует синей полосе для 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>

1. Еще раз спасибо @WhiteHat. Я уже ожидал, что это, вероятно, будет невозможно. Подсказки в моем случае обязательны. Как я могу пометить ваш ответ как ответ?

2. нет проблем, смотрите Ответ, я пытался, но не опубликовал его из-за результата…

Ответ №1:

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

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

вы можете использовать a 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 ,
не уверен, что это стоит затраченных усилий…

1. Надеюсь, это поможет, вы могли бы использовать все пользовательские всплывающие подсказки

2. Я смог реализовать это в своем проекте. Еще раз благодарю вас за блестящее решение.