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

我有一个Google Combination Chart，我使用两个y轴。如何强制双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>

我所知道的关于计算器以下两个问题是相关的这个问题：

在我看来，第一个具体涉及事先知道数据的情况。查看实现它所需的JavaScript的某些指示也很有用。

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

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

来源

2014-10-08 William Gordon

我在谷歌可视化API讨论组中找到了上述问题的答案，由@asgallant提供。请参阅here。

我已复制下面的答案：

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

var axis0Range = data.getColumnRange(1); 

var axis1Range = data.getColumnRange(2);

在vAxes选项

来源

2015-02-12 20:42:18

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

回答

相关问题