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

使用列角色提供

注释类似于已使用的public class Matrix{ private float[][] elements; private int rows; private int cols; public int getRows() { return rows; } public int getCols() { return cols; } public Matrix(int rows, int cols) { this.rows = rows; this.cols = cols; elements = new float[rows][cols]; } public void setElement(int row, int col, float value) { elements[row][col] = value; } public float getElement(int row, int col) { return elements[row][col]; } public static Matrix mult(Matrix a, Matrix b) { Matrix c = new Matrix(a.getRows(), b.getCols()); for (int row = 0; row < a.getRows(); row++) { for (int col = 0; col < b.getCols(); col++) { float sum = 0.0f; for (int i = 0; i < a.getCols(); i++) { sum += a.getElement(row, i) * b.getElement(i, col); } c.setElement(row, col, sum); } } return c; } public static void main(String[] args) { Matrix m = new Matrix(4,4); Matrix m1 = new Matrix(4,4); Matrix multip = Matrix.mult(m, m1); multip = Matrix.mult(m, m1); System.out.println(multip); }列...

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

注意：

默认情况下，

注释将出现在栏的两端，
在此图表的情况下，栏的最左侧

注释展示位置没有标准configuration options，
但您可以手动移动注释，
通过更改role: 'style'元素

上的x属性

请注意，使用<text>时，自定义修改不会反映出来如果你需要生成图表的png图像

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

因此，当活动发生时，必须使用 getImageURI将其移回...

MutationObserver

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

如何在彩色的谷歌条形图中添加图例（在颜色中显示文字）？

1 个答案: