Graph 如何强制双y轴图形对每个轴使用相同的基线？_Graph_Charts_Google Visualization_Axes_Multiple Axes

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

graph charts google-visualization

Graph 如何强制双y轴图形对每个轴使用相同的基线？,graph,charts,google-visualization,axes,multiple-axes,Graph,Charts,Google Visualization,Axes,Multiple Axes,我有一个谷歌组合图，其中我使用了两个y轴目前，各轴的基线处于不同的水平我希望确保每个轴的基线处于同一水平我当前用于显示图形的代码如下所示： <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script> google.load("visualization", "1", {

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'Sales'）；
data.addColumn（'number'，'Total PnL'）；
data.addColumn（'number'，'Total Margin'）；
data.addRows（[[6.5150.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]  ]);                    
变量选项={
标题：“图1”，
工具提示：{textStyle:{fontSize:14}}，
titleTextStyle:{fontSize:12}，
hAxis:{title:'time'，titleTextStyle:{color:'red'，fontSize:15}，textStyle:{fontSize:11，fontsyle:'bold'}，
图例：{maxLines:5，textStyle:{fontSize:11.5}，
序列类型：“条”，
系列：{
0:{键入：“bar”，targetAxisIndex:0，颜色：'#000000'}，
1:{type:“line”，targetAxisIndex:1，颜色：'#333333'}，
}, 
阀门：{
0:{title:'PnL'，titleTextStyle:{fontSize:14}，textStyle:{color:'blue'，fontSize:15}，格式：'.\，
1:{title:'Margin'，titleTextStyle:{fontSize:14}，textStyle:{color:'red'，fontSize:15}，格式：'.####%'}
}
};      
var chart=newgoogle.visualization.ComboChart（document.getElementById（'graphdiv'）；
图表绘制（数据、选项）；
}

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

在我看来，第一个例子专门处理数据事先已知的情况。看到实现它所需的javascript的一些指示也会很有用

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

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

我在Google Visualization api讨论组中找到了上述问题的答案，由@asgallant提供。看

我已将答案转载如下：

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

在VAX选项中：

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

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