Как заставить график с двойной осью y использовать одну и ту же базовую линию для каждой оси?

У меня есть Google Combination Chart, где я использую две оси Y.

В настоящее время базовые линии для каждой оси находятся на разных уровнях.

Я хочу убедиться, что базовые линии для каждой оси находятся на одном уровне.

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

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

    var data = new google.visualization.DataTable();

        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Total PnL');
        data.addColumn('number', 'Total Margin');

        data.addRows([  [6.5,150.6,0.6604],
                        [7.0,-275,-1],
                        [7.5,-128.45000,-0.30368],
                        [8.0,345.5,0.63904761],
                        [8.5,-316.56000,-0.07868],
                        [9.0,-118.26000,-0.09587],
                        [9.5,-899.0699,-0.236790],
                        [10.0,-242.6800,-0.40805],
                        [10.5,28.1700,0.00786]  ]);                    

        var options = {
            title: 'Graph 1',
            tooltip: {textStyle: {fontSize:14}},
            titleTextStyle:{fontSize:12},
            hAxis: {title: 'time', titleTextStyle: {color: 'red',fontSize:15}, textStyle: {fontSize:11,fontStyle:'bold'}},
            legend: {maxLines:5,textStyle: {fontSize: 11.5}},
            seriesType: "bars",
            series: {
                    0: {type: "bar",targetAxisIndex:0,color:'#000000'},
                    1: {type: "line",targetAxisIndex:1,color:'#333333'},
                    }, 
            vAxes:{
                0:{title:'PnL',titleTextStyle: {fontSize:14},textStyle:{color: 'blue',fontSize:15},format:'£###,###,###'},
                1:{title:'Margin',titleTextStyle: {fontSize:14},textStyle:{color: 'red',fontSize:15},format:'#.###%'}
                }
        };      

      var chart = new google.visualization.ComboChart(document.getElementById('graphdiv'));
      chart.draw(data, options);
    }

    </script>
</head>
<body>
    <div id='graphdiv' style='width: 900px; height: 500px;'></div>
</body>
</html>

Мне известны следующие два вопроса о стековом потоке, которые имеют отношение к этому вопросу:

  1. Несколько базовых линий с двойной осью Y Google Chart
  2. Google визуализации выравнивают ось 0 с двумя разными осями Y

Мне кажется, что первое из них касается конкретно ситуации, когда данные известны заранее. Было бы также полезно увидеть некоторые признаки javascript, необходимые для его реализации.

Второй предоставляет некоторый полезный javascript, но он не может иметь дело с рядами данных, где второй ряд содержит отрицательные значения, как это делает мой набор данных.

Мне известно, что наиболее важным компонентом обоих этих ответов является использование свойств minValue и maxValue каждого из vAxes. Их изменение может использоваться для переопределения способа, которым Google Charts обычно определяет базовую линию для каждой оси (обычно это делается путем рассмотрения только минимальных и максимальных значений самих данных для каждой отдельной оси).

Источник

1 ответ

Решение

Я нашел ответ на вопрос выше в группе обсуждения API визуализации Google, любезно предоставленной @asgallant. Смотрите здесь.

Я воспроизвел ответ ниже:

Если наличие базовой линии всегда в центре диаграммы является приемлемым (даже если под ней нет точек данных), существует простое решение этой проблемы: получить min/max для каждой серии и установить параметры minValue/maxValue к отрицательному значению противоположного значения: это гарантирует, что фактические минимальные / максимальные значения, используемые диаграммой для определения диапазона осей, будут симметричны относительно 0, и поэтому обе оси должны иметь базовую линию в центре диаграммы.

var axis0Range = data.getColumnRange(1);

var axis1Range = data.getColumnRange(2);

в опции vAxes:

vAxes:{

0:{
    title:'PnL',
    titleTextStyle: {fontSize:14},
    textStyle:{color: 'blue',fontSize:15},
    format:'£###,###,###',
    // swap the min/max and multiply by -1
    minValue: axis0Range.max * -1,
    maxValue: axis0Range.min * -1
},
1:{
    title:'Margin',
    titleTextStyle: {fontSize:14},
    textStyle:{color: 'red',fontSize:15},
    format:'#.###%',
    // swap the min/max and multiply by -1
    minValue: axis1Range.max * -1,
    maxValue: axis1Range.min * -1
 }
}
Источник
Другие вопросы по тегам