java - 如何在彩色谷歌条形图中添加图例(根据颜色显示文本)？

Question

我正在谷歌地图上绘制图表。该图表有 3-5 个不同颜色的条形。由于x轴下方的空间不是很大，我想在栏的右上角添加一个图例。图例应该直观地显示哪种颜色是什么文本(我无法添加图像，因为我没有声誉=10)。

我应该在代码中使用哪些参数:

var data = new google.visualization.arrayToDataTable([
    ['Year', 'ONE', { role: 'style' } ],
    ['2010', 10, 'color: white'],
    ['2020', 14, 'color: gray'],
    ['2030', 16, 'color: yellow'],
    ['2040', 22, 'color: green'],
    ['2050', 28, 'color: red']
  ]);


    // Set chart options
    var options = {'title':'Revenue per Year',      //main title
                   'width':500,                     //pixel density 
                   'height':500,                    //pixel density
                    bar: {groupWidth: "95%"},       //width of the vertical bars
                    legend: { position: "right", maxLines: 3 }, //none=dont show legends
                    backgroundColor: { fill:'transparent' },    //!!NOTE: this is needed for transparency and to remove white background
                    titleTextStyle: { color: 'red',fontSize: 24},
                    //options for vertical axis(Y)
                    vAxis: {
                    textStyle:{color: '#FFF',fontSize: 24},
                            slantedText:true, slantedTextAngle:60                   // here you can even use 180
                            },
                    //options for horizontal access(X)
                    hAxis: {
                    textStyle:{color: '#FFF',fontSize: 24},
                            direction:-1, slantedText:true, slantedTextAngle:60             // here you can even use 180
                            }
                   };

Answer 1

听起来你想使用 annotation

使用列角色提供注释，
类似于role: 'style'列已被使用...

您可以将注释值添加到数据中，
或使用 View 提供计算列，
如以下工作片段所示...

<小时/>

注意:

默认情况下，注释将出现在栏的末端，
在此图表中，是条形图的最左侧

没有标准configuration options对于注释放置，
但您可以手动移动注释，
通过更改 x <text> 上的属性元素

请记住，使用 getImageURI 时不会反射(reflect)自定义修改,
如果您需要生成图表的 png 图像

此外，图表会将注释移回其原始位置，
任何时候有交互性，例如列悬停

所以必须使用 MutationObserver当 Activity 发生时将它们移回...

<小时/>

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'ONE', { role: 'style' } ],
    ['2010', 10, 'color: white'],
    ['2020', 14, 'color: gray'],
    ['2030', 16, 'color: yellow'],
    ['2040', 22, 'color: green'],
    ['2050', 28, 'color: red']
  ]);

  var options = {
    title: 'Revenue per Year',
    width: 500,
    height: 500,
    bar: {
      groupWidth: '95%'
    },
    legend: {
      position: 'none'
    },
    backgroundColor: {
      fill: 'transparent'
    },
    titleTextStyle: {
      color: 'red',
      fontSize: 24
    },
    vAxis: {
      textStyle: {
        color: '#FFF',
        fontSize: 24
      },
      slantedText: true,
      slantedTextAngle: 60
    },
    hAxis: {
      textStyle: {
        color: '#FFF',
        fontSize: 24
      },
      direction: -1,
      slantedText: true,
      slantedTextAngle: 60
    }
  };

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

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(container);

  // move annotations
  var observer = new MutationObserver(function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
      // identify annotation -- could be tooltip label
      if ((annotation.getAttribute('text-anchor') === 'start') &&
          (annotation.getAttribute('fill') !== '#000000')) {
        var chartLayout = chart.getChartLayoutInterface();
        var annotationBounds = annotation.getBBox();
        var annotationPadding = 4;
        annotation.setAttribute('x',
          chartLayout.getXLocation(0) - annotationBounds.width - annotationPadding
        );
      }
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  chart.draw(view, options);
}

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