Question

我有一个谷歌组合图表，我使用两个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>

我知道有关stackoverflow的以下两个与此问题相关的问题：

Multiple baselines with dual y-axis Google Chart
google visualizations align 0 axis with two different y-axes

在我看来，这些中的第一个具体涉及事先已知数据的情况。看到实现它所需的javascript的一些指示也是有用的。

第二个提供了一些有用的javascript，但它似乎无法处理第二个系列包含负值的数据系列，就像我的数据集一样。

我知道这两个答案中最重要的部分是利用每个vAx的minValue和maxValue属性。更改这些可用于覆盖Google Charts通常决定每个轴的基线的方式（通常通过纯粹查看每个轴的数据本身的最小值和最大值来实现此目的）。

Answer 1

我在google visual api讨论组中找到了上述问题的答案，由@asgallant提供。请参阅here。

我转载了以下答案：

如果基线始终位于图表的中心是可以接受的（即使它下面没有数据点），也可以轻松解决这个问题：获取每个系列的最小值/最大值并设置minValue / maxValue选项为相反值的负数：这将确保图表用于确定轴范围的实际最小值/最大值在0附近对称，因此两个轴应共享图表中心的基线。 / p>

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
 }
}

如何强制双y轴图形为每个轴使用相同的基线？

1 个答案: