Аннотации с диаграммой столбцов материала?

Question

У меня есть данные в виде

[[X, Y, {role: "annotation"}], [1,2, "something"], ...,...]

, что я прохожу в

var data = google.visualization.arrayToDataTable(dataPattern); и участок с

var material = new google.charts.Bar(document.getElementById('distribution-over-range')); 
material.draw(data, google.charts.Bar.convertOptions(options)); 

Аннотации не являются в. Любая идея почему?

Answer 1

google.charts.Bar компонент не поддерживает annotations role, но вы можете использовать google.visualization.BarChart из corechart пакета для этой цели, как показано ниже:

 //google.load("visualization", "1.1", {packages:["bar"]}); 
 
     google.load("visualization", "1.1", {packages:["corechart"]}); 
 
     google.setOnLoadCallback(drawChart); 
 

 
     function drawChart() { 
 
     var data = new google.visualization.arrayToDataTable([ 
 
      ['Opening Move', 'Percentage', { role: "style" }, { role: 'annotation' }], 
 
      ["King's pawn (e4)", 44, "#b87333",'43%'], 
 
      ["Queen's pawn (d4)", 31, "silver", '31%'], 
 
      ["Knight to King 3 (Nf3)", 12, "gold", '12%'], 
 
      ["Queen's bishop pawn (c4)", 10, "color: #e5e4e2", '10%'], 
 
      ['Other', 3, "green", '3%'] 
 
     ]); 
 

 
     var options = { 
 
      title: 'Chess opening moves', 
 
      width: 900, 
 
      legend: { position: 'none' }, 
 
      chart: { title: 'Chess opening moves', 
 
        subtitle: 'popularity by percentage' }, 
 
      bars: 'horizontal', // Required for Material Bar Charts. 
 
      axes: { 
 
      x: { 
 
       0: { side: 'top', label: 'Percentage'} // Top x-axis. 
 
      } 
 
      }, 
 
      bar: { groupWidth: "90%" } 
 
     }; 
 

 
     //var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
 
     var chart = new google.visualization.BarChart(document.getElementById("top_x_div")); 
 
     chart.draw(data, options); 
 
     };

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="top_x_div" style="width: 640px; height: 480px;"></div>