Googleのチャートは、フォーマットされた動的時間軸は

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

だからダニ、すべての目盛りが表示されている：

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

しかし、私は時間に配列を代入しています軸がティックすると、ダニは になりません。

hAxis：{ グリッド：{色： '#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

iは...ホバー問題は削除してみてください負stem

によるものだと思う

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

と

とともに、 'y'を調整 'x'なぜ

（わかりません'23x'が正しく調整されない）

...作業スニペット以下

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