使用注释移动Google Chart列注释位置:行 [英] Moving Google Chart column annotation position using annotation: line

查看:127
本文介绍了使用注释移动Google Chart列注释位置:行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用下面的例子,当使用 style:'line'

  google.charts.load('current',{
callback:function(){
drawChart();
window.addEventListener('resize',drawChart,false);
},
packages:['corechart']
});
$ b函数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,
角色:注释
},
2,
{
calc:stringify,
sourceColumn:2,
类型:string,
角色:注释
}]);

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

//移动注释
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(容器,{
childList:true,
subtree:true
});

chart.draw(view,options);

$ / code>

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



这就是我我试图达到目的: -



< img src =https://i.stack.imgur.com/YxA0h.pngalt =在这里输入图片描述>

解决方案

看起来像是你找到了一个移动注释的例子,但是在这种情况下,因为 style:'line'正被使用,

您必须调整'y'属性以及'rotation'

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



  google.charts.load('current',{pac kages:['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 ',角色:'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); //移动注释google.visualization.events.addListener(图表,'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>


Using the below example, is it possible to move the annotations so they all appear at the same (static) position at the bottom of the graph when using style: 'line' (which makes the annotations read vertically)?

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

Here is an example JSFiddle: http://jsfiddle.net/tVCv9/340/

This is what I am trying to achive:-

解决方案

looks like you found an example for moving the annotations,
however in this case, since style: 'line' is being used,
you must adjust both the 'y' attribute, as well as 'rotation'

see following working snippet...

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>

这篇关于使用注释移动Google Chart列注释位置:行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆