带有材料柱形图的注释? [英] Annotations with Material Column Chart?

问题描述

我有

形式的数据

[[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));

注释无法显示.知道为什么吗?

解决方案

google.charts.Bar组件不支持

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

I have data in the form of

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

that I pass to

var data = google.visualization.arrayToDataTable(dataPattern); and plot with

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

The annotations fail to appear. Any idea why?

解决方案

google.charts.Bar component does not support annotations role but you could utilize google.visualization.BarChart from corechart package for that purpose as demonstrated below:

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

这篇关于带有材料柱形图的注释?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！