javascript - 使用注释移动Google图表列注释位置: line

Question

使用下面的示例，当使用 style: 'line' (这使得注释垂直阅读)？

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['', 75, 25],
        ['', 50, 40],
        ['', 80, 15]
    ]);

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

    var options = {
        legend: 'none',
        height: 270,
        chartArea: { 'width': '80%', 'height': '80%' },
        bar: { groupWidth: '80%' },
            annotations: {
              style: 'line',
                textStyle: {
                fontSize: 8,
                color: 'black',
                strokeSize: 0,
                auraColor: 'transparent'
              },
              alwaysOutside: true,  
              stem:{
                            color: 'transparent',
                          },   
            },        
        vAxis: {
            textPosition: 'none',
            gridlines: {
                color: 'transparent'
            }
        },
      series: {
          0: { color: '#00A887' },
          1: { color: '#F6323E' },
        }

    };

    var container = document.getElementById('northPMChart');
    var chart = new google.visualization.ColumnChart(container);

    // move annotations
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (annotation.getAttribute('fill') === '#ffffff')) {
          var chartLayout = chart.getChartLayoutInterface();
          annotation.setAttribute('y',
            chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
          );
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(view, options);
}

这是一个 JSFiddle 示例:http://jsfiddle.net/tVCv9/340/

这就是我想要实现的目标:-

Answer 1

看起来您找到了移动注释的示例，
但是在本例中，由于使用了 style: 'line'，
您必须调整 'y' 属性以及 'rotation'

请参阅以下工作片段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Type', 'Completed', 'Outstanding'],
    ['', 75, 25],
    ['', 50, 40],
    ['', 80, 15]
  ]);

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

  var options = {
    annotations: {
      style: 'line',
      textStyle: {
        fontSize: 8,
        color: 'black',
        strokeSize: 0,
        auraColor: 'transparent'
      },
      alwaysOutside: true,
      stem:{
        color: 'transparent',
      },
    },
    legend: 'none',
    height: 270,
    chartArea: {
      width: '80%',
      height: '80%'
    },
    bar: {
      groupWidth: '80%'
    },
    vAxis: {
      textPosition: 'none',
      gridlines: {
        color: 'transparent'
      }
    },
    series: {
      0: {color: '#00A887'},
      1: {color: '#F6323E'},
    }
  };

  var container = document.getElementById('northPMChart');
  var chart = new google.visualization.ColumnChart(container);

  // move annotations
  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var yLocation = chartLayout.getYLocation(0) + options.annotations.textStyle.fontSize;
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (parseInt(annotation.getAttribute('font-size')) === options.annotations.textStyle.fontSize)) {
          var rotate = 'rotate(270 ' + annotation.getAttribute('x') + ' ' + yLocation + ')';
          annotation.setAttribute('y', yLocation);
          annotation.setAttribute('transform', rotate);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(view, options);
});

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