javascript - 带有 Material 柱形图的注释？

Question

我有以下形式的数据

[[X, Y, { Angular 色: "注释"}], [1,2, "某物"], ...,...]

我传递给

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但您可以利用 corechart 包中的 google.visualization.BarChart 来实现此目的，如下所示:

      //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>