Googleの線の上に注釈を追加する線グラフ

Question

折れ線グラフを作成するためのコードです。私は、ライン注釈の上にイメージを追加しようとしています。ここにはデモがjsfiddleにあります。ここ はコードです：

google.charts.load('current', {packages: ['corechart', 'line']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

     var data = new google.visualization.DataTable(); 

     data.addColumn('number', 'X'); 
     data.addColumn({type: 'string', role: 'annotation'}); 
     data.addColumn('number', 'Dogs'); 
     data.addColumn('number', 'Cats'); 

     data.addRows([ 
     [0,null, 0, 1], [1,'', 10,3], [2,null, 23,6], [3,null, 17,7], [4,null, 18,4], [5,null, 9,7] 
     ]); 

     var options = { 
     curveType : 'function', 
     hAxis: { 
      title: 'Time', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     vAxis: { 
      title: 'Popularity', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     annotations: { 
      style: 'line', 
      position: 'top' 
     } 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

     chart.draw(data, options); 
    } 

私は本当にこれを行う方法を見つけ出すことはできません。誰もこれをやった？

Answer 1

'role': 'tooltip', 'p': {'html': true}});をyour data.addColumnに、 をoptionsにそれぞれ使用してください。tooltip: { isHtml: true }です。

HTML：

<div id="chart"></div> 

はJavaScript：

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'y'); 
    data.addColumn('number', 'Line 1'); 
    data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}}); 
    data.addColumn('number', 'Line 2');  

    data.addRow([1, 1, '<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 2]); 
    data.addRow([2, 2,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 4]); 
    data.addRow([3, 3,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 6]); 
    data.addRow([4, 4,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 8]); 
    data.addRow([5, 5,'<img src="https://www.google.com/images/srpr/logo6w.png" style="width:30px;height:50px"/>', 10]); 

    var options = { 
     title: 'Graph', 
     hAxis: { 
      title: 'Time', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     vAxis: { 
      title: 'Popularity', 
      gridlines: { 
       color: 'transparent' 
      } 
     }, 
     annotations: { 
      style: 'line', 
      position: 'top' 
     }, 
     tooltip: {isHtml: true}, 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
    chart.draw(data, options); 
} 

google.load("visualization", "1", { 
    packages: ["corechart"] 
}); 

google.setOnLoadCallback(drawChart); 

はJsFiddleで参照してください。 （アニメーションを使用した場合、または'animationfinish'）あなたは'ready'イベントが発生
たら、チャートに要素を追加することができます

Answer 2

まず、<rect>要素と同様

される、注釈を見つける必要があります軸ラインは、彼らが'width'

1のを持っていますが、彼らは異なる 'fill'属性
を持っています

が

次の作業スニペットは注釈ラインを見つけて、トップ

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBasic() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addColumn('number', 'Dogs'); 
 
    data.addColumn('number', 'Cats'); 
 
    data.addRows([ 
 
    [0, null, 0, 1], 
 
    [1, '', 10, 3], 
 
    [2, null, 23, 6], 
 
    [3, null, 17, 7], 
 
    [4, null, 18, 4], 
 
    [5, null, 9, 7] 
 
    ]); 
 

 
    var options = { 
 
    annotations: { 
 
     position: 'top', 
 
     style: 'line' 
 
    }, 
 
    hAxis: { 
 
     gridlines: { 
 
     color: 'transparent' 
 
     }, 
 
     title: 'Time' 
 
    }, 
 
    vAxis: { 
 
     gridlines: { 
 
     color: 'transparent' 
 
     }, 
 
     title: 'Popularity' 
 
    }, 
 
    }; 
 

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

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) { 
 
     if ((rect.getAttribute('width') === '1') && (rect.getAttribute('fill') === '#999999')) { 
 
     var xPos = parseFloat(rect.getAttribute('x')); 
 
     var yPos = parseFloat(rect.getAttribute('y')); 
 

 
     var whiteHat = container.appendChild(document.createElement('img')); 
 
     whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png'; 
 
     whiteHat.className = 'whiteHat'; 
 

 
     // 16x16 (image size in this example) 
 
     whiteHat.style.top = (yPos - 8) + 'px'; 
 
     whiteHat.style.left = (xPos) + 'px'; 
 
     } 
 
    }); 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

.whiteHat { 
 
    border: none; 
 
    position: absolute; 
 
}

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

に画像を追加します（多くのスタイル設定が annotationsオプションで設定されている場合は、これを覚えておきます）