谷歌圖表中的酒吧重疊問題 - 組合圖表

Question

我有一個谷歌圖表實施的小問題。按照要求，我應該有雙Y軸和Y軸的條應該重疊。我實現了下面的輸出與我的代碼：

通告最後兩根棒的兩個藍色箭頭。藍色酒吧隱藏在紅色酒吧後面，因爲它更小。它實際上應該是這個樣子：

這是我的js文件代碼：

var chart, data; 

google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(drawChart); 

function drawChart() 
{ 
    // Create the data table. 
    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addColumn('number', 'pieces'); 
    data.addColumn('number', 'ratio'); 
    data.addColumn('number', 'ratio2'); 
    data.addRows([ 
     ['Mushrooms', 300, 200, 50, 1], 
     ['Onions', 100, 244, 4, 3], 
     ['Olives', 100, 400, 56, 10] 
    ]); 

    // Set chart options 
    options = { 
     chartType:"ComboChart", 
     containerId:"visualization", 
     stackSeries: true, 
     isStacked : true, 
     seriesDefaults: { 

      rendererOptions: { 
       barPadding: 0, 
       barMargin: 10 
      }, 
      pointLabels: { 
       show: true, 
       stackedValue: true 
      } 
     }, 
     grid: { 
      background: '#272424', 
      drawGridlines: false 
     }, 
     seriesType: "bars",  
     series: { 
        0: { 
          targetAxisIndex: 0 
         }, 
         1: { 
          targetAxisIndex: 1 
         }, 
         2: { 
          targetAxisIndex: 1, 
          type: "line" 
         }, 
         3: { 
          type: "line" 
         } 

       }, 
       hAxis:{ 

       },   
       vAxes: { 
        0: {   
         title: "Slices",     
         label:'Slices',  
         type:'bars'       
        }, 
        1: { 
         title: "pieces", 
         label:'pieces', 
         type:'bars' 
        }, 
        2: { 
         title: "ratio,", 
         label:'ratio', 
         type:'line' 
        }, 
        3: { 
         title: "ratio2,", 
         label:'ratio2', 
         type:'line' 
        } 

       } 
     }; 

    // Instantiate and draw our chart, passing in some options. 
    chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    google.visualization.events.addListener(chart, 'select', selectionHandler); 
} 

function selectionHandler() { 
    var selectedData = chart.getSelection(), row, item; 
    if(selectedData != '') 
    { 
     row = selectedData[0].row; 
     item = data.getValue(row,3); 
     alert("You selected :" + item);   
    } 
} 

任何人都可以給我建議，我怎麼能去呢？任何幫助，將不勝感激。

Answer 1

您在單獨的軸顯示您的吧：

   0: { 
         targetAxisIndex: 0 
        }, 
        1: { 
         targetAxisIndex: 1 
        }, 
        2: { 
         targetAxisIndex: 1, 
         type: "line" 
        }, 
        3: { 
         type: "line" 
        } 

所以第一條爲左軸，第二個是在右軸。第一個欄只顯示，因爲它比它前面的紅色欄高。這是設計。如果你希望他們疊加顯示，你的代碼改成這樣：

0: { 
    targetAxisIndex: 0 
    }, 
    1: { 
    targetAxisIndex: 0 
    }, 
    2: { 
    targetAxisIndex: 1, 
    type: "line" 
    }, 
    3: { 
    targetAxisIndex: 1, 
    type: "line" 
    } 

這將結束這樣的：

請注意，您的兩個軸不再具有相當規模。根據需要調整其他參數。如果你想把它們並排放置，你可以把它們放在同一個軸上，並移除它們使它們彼此相鄰的位置。

^{注意：這種圖表非常繁忙，可能不是很好的可視化實踐。無論如何，如果您需要創建圖表，上述解決方案應該可以工作。如果你真的認爲你需要前面的小欄，那麼使用SVG編輯好運。}

Answer 2

實際上有一種方法可以使用DataView將您的藍色數據系列分成兩部分。製作數據大於紅色系列的一個系列，以及小於或等於紅色系列的系列，並將它們按大於，小於，小於。在系列選項中，將此新系列設置爲與第一個系列相同的顏色，並將其隱藏在索引中。

這裏的數據視圖，你可以使用：

var view = new google.visualization.DataView(data); 
view.setColumns([0, { 
    type: 'number', 
    label: data.getColumnLabel(1), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 1); 
     return (val > dt.getValue(row, 2)) ? val : null; 
    } 
}, 2, { 
    type: 'number', 
    label: data.getColumnLabel(1), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 1); 
     return (val <= dt.getValue(row, 2)) ? val : null; 
    } 
}, 3, 4]); 

和這裏的一系列選項：

series: { 
    0: { 
     targetAxisIndex: 0 
    }, 
    1: { 
     targetAxisIndex: 1 
    }, 
    2: { 
     targetAxisIndex: 0, 
     visibleInLegend: false, 
     color: '#3366cc' // matches series 0 
    }, 
    3: { 
     targetAxisIndex: 1, 
     type: "line" 
    }, 
    4: { 
     type: "line" 
    } 
} 

繪製圖表的觀點，而不是數據表：

chart.draw(view, options); 

見它在這裏工作：http://jsfiddle.net/asgallant/4jhC5/