2014-02-27 51 views
0

我有一個組合圖表,它工作的很好,但我無法在同一時間只顯示一個或另一個顯示軸標籤和軸標題。我如何顯示它們兩個?谷歌組合圖表 - 添加hAxis.title刪除軸標籤?

代碼:

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

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'group'); 
    data.addColumn('number', 'value'); 
    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true, targetAxisIndex: 0}}); 
    data.addColumn('number', 'count'); 
    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true, targetAxisIndex: 0}}); 
    data.addRow([1404, 73.4, '<div class="tooltip-label"><strong>Group:</strong> 1404<br><strong>Value:</strong> 73.4</div>', 4, '<div class="tooltip-label"><strong>Group:</strong> 1404<br><strong>Count:</strong> 4</div>']) 
    data.addRow([1406, 201.5, '<div class="tooltip-label"><strong>Group:</strong> 1406<br><strong>Value:</strong> 201.5</div>', 7, '<div class="tooltip-label"><strong>Group:</strong> 1406<br><strong>Count:</strong> 7</div>']) 
    data.addRow([1407, 52.1, '<div class="tooltip-label"><strong>Group:</strong> 1407<br><strong>Value:</strong> 52.1</div>', 3, '<div class="tooltip-label"><strong>Group:</strong> 1407<br><strong>Count:</strong> 3</div>']) 
    data.addRow([1408, 38.9, '<div class="tooltip-label"><strong>Group:</strong> 1408<br><strong>Value:</strong> 38.9</div>', 9, '<div class="tooltip-label"><strong>Group:</strong> 1408<br><strong>Count:</strong> 9</div>']) 


    var options = { 
     vAxes: { 
      0: {title: 'value', textStyle: {color: 'blue'}, titleTextStyle: {fontSize: 12, bold: 'true'}}, 
      1: {title: 'count', textStyle: {color: 'red'}, titleTextStyle: {fontSize: 12, bold: 'true'}} 
     }, 
     hAxis: { 
      // title: 'group', 
      titleTextStyle: { 
       fontSize: 12, 
       bold: 'true' 
      }, 
      format: '####' 
     }, 
     seriesType: 'bars', 
     series: {1: {type: 'line', targetAxisIndex: 1, pointSize: 3}}, 
     backgroundColor: 
     { 
      fill: 'transparent' 
     }, 
     legend: 
     { 
      position: 'bottom' 
     }, 
     tooltip: 
     { 
      isHtml: 'true' 
     } 
    }; 

    var chart = new google.visualization.ComboChart(jQuery('#chart')[0]); 
    chart.draw(data, options); 
} 
+0

使用您的代碼,我的軸標籤,標題和圖例在底部。你有多少空間用於圖表?什麼是造型? –

+0

@AntoJurković真的嗎?我根本沒有造型!我正在測試它在一個光禿禿的骨頭的PHP文件中,除了圖表div和javascript我發佈在我的問題中... – doovers

+0

嘗試用''。你必須爲圖表定義空間。 –

回答

0

如果沒有空間「預訂」爲你必須做的圖表。嘗試用類似

<style> 
#chart { 
    width: 50%; 
    height: 100%; 
} 
</style> 

在頭部分。