Google图表，格式化的动态H轴不起作用 [英] Google chart, formatted dynamic h-axis is not working

问题描述

在h轴刻度线中进行硬编码时生成的图形图像链接

我必须绘制一个折线图，在该图中必须动态应用x轴刻度.图表中的列如下:

  data.addColumn('number'，'Equity');//x轴刻度data.addColumn('number'，'A');//系列一data.addColumn('number'，'B');//第二系列 

我要在行中添加数据，如下所示，可以有多行
仅在运行时才知道.所以我必须插入所有行动态地

  data.addRow([2，0.8，null]);data.addRow([3，null，5]);............ 

我必须格式化h轴刻度，所以当我如下对h轴进行硬编码时然后所有的刻度都出现了:

  hAxis:{网格线:{color:'#fff'}，滴答声:{v:0，f:''}，{v:1，f:'Equity#1'}，{v:2，f:'Equity#2'}，{v:3，f:'Equity#3'}，{v:4，f:基金投资价值"}]} 

但是当我为h轴刻度线分配数组时，刻度线不出现.

hAxis:{网格线:{color:'#fff'}，滴答声:hAxisTicksArray}

该数组具有与硬编码中相同的值.只为你参考我在数组中插入值，如下所示:

  var hAxisTicksArray = [];hAxisTicksArray.push("{v:1，f:'Equity#1'}"));hAxisTicksArray.push("{v:2，f:'Equity#2'}"));................hAxisTicksArray ::{v:1，f:'Equity#1'}，{v:2，f:'Equity#2'}，{v:3，f:'Equity#3'}，{v:4，f:基金投资价值"} 

在这方面请帮助我.预先感谢.

解决方案

我认为悬停问题是由于负的 stem

尝试删除...

 注释:{干: {长度:-5}}， 

并调整'y'以及'x'

(不确定为什么'23x'调整不正确)

请参阅以下工作摘要...

  google.charts.load('current'，{回调:函数(){drawVisualization();window.addEventListener('resize'，drawVisualization，false);}，包:['corechart']});函数drawVisualization(){var data = new google.visualization.DataTable();data.addColumn('number'，'PC');data.addColumn('number'，'A');data.addColumn({type:'string'，role:'annotation'});data.addColumn({类型:字符串"，角色:工具提示"});data.addColumn({type:'string'，role:'style'});data.addColumn('number'，'B');data.addColumn({type:'string'，role:'annotation'});data.addColumn({类型:字符串"，角色:工具提示"});data.addColumn({type:'string'，role:'style'});data.addColumn('number'，'C');data.addColumn({type:'string'，role:'annotation'});data.addColumn({类型:字符串"，角色:工具提示"});data.addColumn({type:'string'，role:'style'});data.addRow([{{v:2，f:''}，0.8，'0.8x'，'PC#1，Low，0.8x'，'点{大小:5；形状类型:正方形；填充颜​​色:#DB1D40;}'，null，null，null，null，null，null，null，null])；data.addRow([{{v:2，f:''}，7.4，'7.4x'，'PC#1，High，7.4x'，'点{大小:5；形状类型:正方形；填充颜​​色:#DB1D40;}'，null，null，null，null，null，null，null，null])；data.addRow([{{v:2，f:''}，12.2，'12 .2x'，'PC#1，Multiple，12.2x'，'点{大小:5；形状类型:三角形；填充颜​​色:#DB1D40;}'，null，null，null，null，null，null，null，null])；data.addRow([{v:3，f:''}，null，null，null，null，5，'5.0x'，'PC#2，Low，5.0x'，'点{大小:5；形状类型:正方形；填充颜​​色:#DB1D40;}'，null，null，null，null])；data.addRow([{v:3，f:''}，null，null，null，null，15，'15x'，'PC#2，高，15x'，'点{大小:5；形状类型:正方形；填充颜​​色:#DB1D40;}'，null，null，null，null])；data.addRow([{v:3，f:''}，null，null，null，null，23，'23x'，'PC#2，Multiple，23x'，'点{大小:5；形状类型:三角形；fill-color:#DB1D40;}'，null，null，null，null])；data.addRow([{v:1，f:''}，null，null，null，null，null，null，null，null，2，'2.0x'，'PC#2，Low，2.0x'，'点{大小:5；形状类型:正方形；填充颜​​色:#DB1D40;}'])；data.addRow([{v:1，f:''}，null，null，null，null，null，null，null，null，7，'7x'，'PC#2，高，7x'，'点{大小:5；形状类型:正方形；填充颜​​色:#DB1D40;}'])；data.addRow([{v:1，f:''}，null，null，null，null，null，null，null，null，11，'11x'，'PC#2，Multiple，11x'，'点{大小:5；形状类型:三角形；fill-color:#DB1D40;}'])；var container = document.getElementById('visualization');var chart = new google.visualization.ComboChart(container);var注解= {};google.visualization.events.addOneTimeListener(图表，'就绪'，函数(){Array.prototype.forEach.call(container.getElementsByTagName('text')，function(text，index){如果(text.getAttribute('text-anchor')==='middle'){注解[index] = {};if(！text.innerHTML.startsWith("PC")){注解[index] .x = parseFloat(text.getAttribute('x'))+ 20;} 别的 {注解[index] .x = parseFloat(text.getAttribute('x'));}注解[index] .y = parseFloat(text.getAttribute('y'))+ 18;}});var观察者=新的MutationObserver(function(){Array.prototype.forEach.call(container.getElementsByTagName('text')，function(text，index){如果(text.getAttribute('text-anchor')==='middle'){text.setAttribute('x'，注解[index] .x);text.setAttribute('y'，注解[index] .y);}});});Observer.observe(container，{childList:是的，子树:true});});chart.draw(data，{传说:无"，颜色:['GREY']，seriesType:'酒吧'，系列 : {0:{类型:行"，targetAxisIndex:0，lineDashStyle:[3，3]}，1:{类型:行"，targetAxisIndex:0，lineDashStyle:[6，3]}，2:{类型:行"，targetAxisIndex:0，lineDashStyle:[6，3]}}，hAxis:{网格线:{color:'#fff'}，滴答声:{v:0，f:'PC#0'}，{v:1，f:'PC#1'}，{v:2，f:'PC#2'}，{v:3，f:'PC#3'}，{v:4，f:'4'}]}，pointSize:5dataOpacity:1.0，});}  

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

Graph image link which is generated when hardcoding in h-axis ticks

I have to draw a line chart where I have to apply x-axis ticks dynamically. Columns in chart are as follows:

  data.addColumn('number', 'Equity'); // x-axis ticks 
  data.addColumn('number', 'A');  //series one
  data.addColumn('number', 'B');  //series two

I am adding data in rows is like given below, there can be multiple rows
which is known only at run time. So I have to insert all the rows dynamically.

   data.addRow([2, 0.8, null]);
   data.addRow([3, null, 5]);   
   .........
   .........

I have to format the h-axis ticks So When I am hardcoding h-axis as below then all the ticks are appearing:

hAxis: {
     gridlines: {color: '#fff'},        
     ticks: [
             {v:0, f: ''},
             {v:1, f: 'Equity#1'},
         {v:2, f: 'Equity#2'},
         {v:3, f: 'Equity#3'},
         {v:4, f: 'Funds Investment Value'}
           ]
   }

But When I am assigning a array to h-axis ticks, then ticks are not appearing.

hAxis: { gridlines: {color: '#fff'}, ticks: hAxisTicksArray },

The array is having the same values as I did in hardcoding. Just for your reference I am inserting values in array as given below:

   var hAxisTicksArray = [];
   hAxisTicksArray.push("{v:1, f: 'Equity#1'}");
   hAxisTicksArray.push("{v:2, f: 'Equity#2'}");
   ........
   ........

   hAxisTicksArray::
   {v:1, f: 'Equity#1'},
   {v:2, f: 'Equity#2'},
   {v:3, f: 'Equity#3'},
   {v:4, f: 'Funds Investment Value'}

Please help me in this regard. Thanks in advance.

解决方案

i think the hover problem is due to the negative stem

try removing...

annotations: {
  stem: {
    length: -5
  }
},

and adjusting the 'y', along with 'x'

(not sure why '23x' doesn't adjust properly)

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawVisualization();
    window.addEventListener('resize', drawVisualization, false);
  },
  packages:['corechart']
});
function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'PC');
  data.addColumn('number', 'A');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({ type: 'string', role: 'tooltip'});
  data.addColumn({type: 'string', role: 'style'});

  data.addColumn('number', 'B');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({ type: 'string', role: 'tooltip'});
  data.addColumn({type: 'string', role: 'style'});

  data.addColumn('number', 'C');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({ type: 'string', role: 'tooltip'});
  data.addColumn({type: 'string', role: 'style'});

  data.addRow([{v: 2, f: ''}, 0.8, '0.8x', 'PC#1, Low, 0.8x',
  'point { size: 5; shape-type: square; fill-color: #DB1D40; }'
  ,null,null,null, null,null,null,null,null]);

  data.addRow([{v: 2, f: ''}, 7.4, '7.4x', 'PC#1, High, 7.4x',
  'point { size: 5; shape-type: square; fill-color: #DB1D40; }',
  null,null,null, null,null,null,null,null]);

  data.addRow([{v: 2, f: ''}, 12.2, '12.2x', 'PC#1, Multiple, 12.2x',
  'point { size: 5; shape-type: triangle; fill-color: #DB1D40; }',
  null,null,null, null,null,null,null,null]);


  data.addRow([{v: 3, f: ''},  null,null,null,null,
   5, '5.0x', 'PC#2, Low, 5.0x',
  'point { size: 5; shape-type: square; fill-color: #DB1D40; }',
  null,null,null,null]);

  data.addRow([{v: 3, f: ''}, null,null,null,null,
  15, '15x', 'PC#2, High, 15x',
  'point { size: 5; shape-type: square; fill-color: #DB1D40; }',
  null,null,null,null]);

  data.addRow([{v: 3, f: ''},  null,null,null,null,
  23, '23x', 'PC#2, Multiple, 23x',
  'point { size: 5; shape-type: triangle; fill-color: #DB1D40;}',
  null,null,null,null]);



  data.addRow([{v: 1, f: ''},  null,null,null, null,null,null,null,null,
   2, '2.0x', 'PC#2, Low, 2.0x',
  'point { size: 5; shape-type: square; fill-color: #DB1D40; }']);

  data.addRow([{v: 1, f: ''},  null,null,null,null,null,null,null,null,
  7, '7x', 'PC#2, High, 7x',
  'point { size: 5; shape-type: square; fill-color: #DB1D40; }']);

  data.addRow([{v: 1, f: ''},  null,null,null,null,null,null,null,null,
  11, '11x', 'PC#2, Multiple, 11x',
  'point { size: 5; shape-type: triangle; fill-color: #DB1D40;}']);


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

  var annotations = {};
  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
      if (text.getAttribute('text-anchor') === 'middle') {
         annotations[index] = {};
         if(!text.innerHTML.startsWith("PC")) {
           annotations[index].x = parseFloat(text.getAttribute('x')) + 20;
         } else {
           annotations[index].x = parseFloat(text.getAttribute('x'));
         }
         annotations[index].y = parseFloat(text.getAttribute('y')) + 18;
      }
    });

    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
        if (text.getAttribute('text-anchor') === 'middle') {
          text.setAttribute('x', annotations[index].x);
          text.setAttribute('y', annotations[index].y);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, {
    legend: 'none',
    colors: ['GREY'],
    seriesType : 'bars',
    series : {
      0 : {
        type : 'line',
        targetAxisIndex : 0,
        lineDashStyle: [3, 3]

      },
      1 : {
        type : 'line',
        targetAxisIndex : 0,
        lineDashStyle: [6, 3]
      },
      2 : {
        type : 'line',
        targetAxisIndex : 0,
        lineDashStyle: [6, 3]
      }
    },
    hAxis: {
      gridlines: {color: '#fff'},
      ticks: [
        {v: 0, f: 'PC#0'},
        {v: 1, f: 'PC#1'},
        {v: 2, f: 'PC#2'},
        {v: 3, f: 'PC#3'},
        {v: 4, f: '4'}
      ]
    },
    pointSize: 5,
    dataOpacity: 1.0,
  });
}

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

这篇关于Google图表，格式化的动态H轴不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！