Как создать диаграмму с двойной осью Y с помощью Google Visualization API? - PullRequest
Новая
       7

Как создать диаграмму с двойной осью Y с помощью Google Visualization API?

0 голосов
/ 13 марта 2020

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

Мне нужно нарисовать диаграмму, похожую на: enter image description here

Вот скрипка

https://jsfiddle.net/nehadhiman6/30bxL2me/2/

 function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight','z-score'],
          [ 8,      12 , 12],
          [ 4,      5.5, 5],
          [ 11,     14, 9],
          [ 4,      5, 3],
          [ 3,      3.5, 8],
          [ 6.5,    7, 9]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},

          legend: 'none',

        };

1 Ответ

1 голос
/ 13 марта 2020

Для диаграммы, подобной следующей:

enter image description here

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

См. пример в действии в следующем фрагменте: 

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

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Age', 'Weight','z-score'],
    [ 8,      12 , 12],
    [ 4,      5.5, 5],
    [ 11,     14, 9],
    [ 4,      5, 3],
    [ 3,      3.5, 8],
    [ 6.5,    7, 9]
  ]);

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  var options = {
    title:'Age vs. Weight and Z-Score',
    hAxis: {title:'Age', minValue:0, maxValue: 15},
    vAxes: { 
      0:{title: 'Weight', minValue: 0, maxValue: 15},
      1:{title: 'Z-score', minValue: -20, maxValue: 20}
    },
    series: {
      0:{targetAxisIndex:0},
      1:{targetAxisIndex:1}
    },
    legend: 'top'
  }

  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 400px; height: 200px;"></div>

Полезная документация: Графики документов

...