如何強制雙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軸圖形爲每個軸使用相同的基線？

回答

相關問題