移動Google Chart列註釋位置

Question

我使用下面的代碼生成列圖中的數字的柱狀圖，但我真的很喜歡它們位於酒吧底部而不是頂部。

這裏有一個直觀圖表我有：

var data = google.visualization.arrayToDataTable([ 
     ['Type', 'Completed', 'Outstanding'], 
     ['Item 1', 75, 25], 
     ['Item 2', 50, 40], 
     ['Item 3', 80, 15] 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 
     { 
      calc: "stringify", 
      sourceColumn: 1, 
      type: "string", 
      role: "annotation" 
     }, 
     2, 
     { 
      calc: "stringify", 
      sourceColumn: 2, 
      type: "string", 
      role: "annotation" 
     }]); 

    var options = { 
     legend: 'none', 
     height: 270, 
     chartArea: { 'width': '80%', 'height': '80%' }, 
     bar: { groupWidth: '80%' }, 
     vAxis: { 
      textPosition: 'none', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     series: { 
      0: { color: '#00A887' }, 
      1: { color: '#F6323E' }, 
     } 

    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('northPMChart')); 

    chart.draw(view, options); 

任何幫助非常讚賞。

Answer 1

沒有標準configuration options移動註釋底部

可以調整annotations.stem.length從默認位置

調整，但這將移動所有標註相同的距離，

這將不在這裏工作

---

您可以手動移動註釋，因爲我n中的下面的代碼片段...

然而，自定義的修改將不會被使用getImageURI，
如果你需要製作圖表的PNG圖像

也反映時，圖表將註釋回遷原來的位置，
隨時有互動，如列懸停

所以必須使用MutationObserver他們回遷，當活動時...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    window.addEventListener('resize', drawChart, false); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Type', 'Completed', 'Outstanding'], 
 
     ['Item 1', 75, 25], 
 
     ['Item 2', 50, 40], 
 
     ['Item 3', 80, 15] 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 
 
     { 
 
      calc: "stringify", 
 
      sourceColumn: 1, 
 
      type: "string", 
 
      role: "annotation" 
 
     }, 
 
     2, 
 
     { 
 
      calc: "stringify", 
 
      sourceColumn: 2, 
 
      type: "string", 
 
      role: "annotation" 
 
     }]); 
 

 
    var options = { 
 
     legend: 'none', 
 
     height: 270, 
 
     chartArea: { 'width': '80%', 'height': '80%' }, 
 
     bar: { groupWidth: '80%' }, 
 
     vAxis: { 
 
      textPosition: 'none', 
 
      gridlines: { 
 
       color: 'transparent' 
 
      } 
 
     }, 
 
     series: { 
 
      0: { color: '#00A887' }, 
 
      1: { color: '#F6323E' }, 
 
     } 
 

 
    }; 
 

 
    var container = document.getElementById('northPMChart'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 

 
    // move annotations 
 
    var observer = new MutationObserver(function() { 
 
     Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) { 
 
     if ((annotation.getAttribute('text-anchor') === 'middle') && 
 
      (annotation.getAttribute('fill') === '#ffffff')) { 
 
      var chartLayout = chart.getChartLayoutInterface(); 
 
      annotation.setAttribute('y', 
 
      chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size'))/2) 
 
     ); 
 
     } 
 
     }); 
 
    }); 
 
    observer.observe(container, { 
 
     childList: true, 
 
     subtree: true 
 
    }); 
 

 
    chart.draw(view, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="northPMChart"></div>