标签：javascript charts google-visualization

使用下面的示例,是否可以移动注释,以便在使用样式：“线”(使注释垂直读取)时,它们全部出现在图形底部的相同(静态)位置？

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/

这就是我要达到的目标：

解决方法:

看起来您找到了移动注释的示例,
但是,在这种情况下,由于使用了样式：“线”,
您必须同时调整“ y”属性和“旋转”

请参阅以下工作片段…

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>

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20191012/1903537.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。