Можем ли мы нарисовать диаграмму Google с двумя осью Y, одна с верхом, а другая с низом, с одной и той же осью X?

Мне нужно использовать диаграмму Google с двумя осями Y и одной осью X, например (https://en.wikipedia.org/wiki/Spirometry#/media/File:Flow-volume-loop.svg). Поддерживает ли диаграмма Google этот тип графика?


angular charts google-visualization angular-chart
person Sharmile Murugaraj    schedule 13.07.2016    source источник
comment
Перейдите по этой ссылке: developers.google.com/chart/interactive/docs/customizing_axes   -  person Sanket    schedule 13.07.2016
comment
Ваше изображение на самом деле имеет только одну ось Y, но я думаю, что особенность этой диаграммы заключается в том, что метки оси X появляются внутри области диаграммы на линии y = 0. Диаграмма с двумя осями Y обычно имеет две разные шкалы для сравнения отношений, которые либо имеют очень разные диапазоны чисел (количество проданных единиц и количество единиц на складе), либо совершенно разные единицы измерения (количество осадков и речной сток).   -  person nbering    schedule 13.07.2016

Ответы (1)


arrow_upward
3
arrow_downward

чтобы создать график, на который ссылается ссылка
, используйте одну ось Y с отрицательными значениями для нижней части

затем используйте объектную нотацию, чтобы установить как значение (v:), так и форматированное значение (f:)
{v: -8, f: '8'}

затем используйте те же обозначения для делений оси Y (ticks:)

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

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['X', 'Y'],
      [1.5,  8],
      [2.5,  4],
      [3.5,  1],
      [1.5, {v: -8, f: '8'}],
      [2.5, {v: -4, f: '4'}],
      [3.5, {v: -1, f: '1'}],
    ]);

    var ticksX = [0, 2, 4, 6];
    var ticksY = [{v: -10, f: '10'}, {v: -8, f: '8'}, {v: -6, f: '6'}, {v: -4, f: '4'}, {v: -2, f: '2'}, 0, 2, 4, 6, 8, 10];

    var options = {
      hAxis: {
        title: 'h axis',
        ticks: ticksX
      },
      vAxis: {
        title: 'v axis',
        ticks: ticksY,
        viewWindow: {
          min: -10,
          max: 10
        }
      },
      height: 600,
      width: 600,
      chartArea: {
        height: '75%',
        width: '75%'
      }
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

person WhiteHat    schedule 13.07.2016
comment
Да, отлично. Я пробовал это в jsfiddle, он работает. спасибо - person Sharmile Murugaraj; 14.07.2016