谷歌图表，格式化的动态 h 轴不起作用

Question

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

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

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

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

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

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

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'}
           ]
   }

但是当我将数组分配给 h 轴刻度时，刻度不是 出现。

h轴：{ 网格线：{颜色：'#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: 'Funds Investment Value'}

请在这方面帮助我。提前致谢。

Answer 1

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

尝试删除...

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

并调整'y'，以及'x'

（不知道为什么'23x'没有正确调整）

请参阅以下工作 sn-p...

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>

Answer 2

I caught the issue. I was inserting the data in h-axis ticks array as string
instead of putting that as json object. Now its working fine.

 Below is the wrong way, I was doing:
 hAxisTicksArray.push("{v:"+hAxisTick+", f: '"+firstColValue+"'}");

Below is the correct way, which I am doing right now and h-axis ticks are
coming properly:
 hAxisTicksArray.push({v:hAxisTick, f: firstColValue});