ツールチップと色を使ったGoogleのグラフ

Question

色を作る方法を示す1つの記事を見ましたが、それは私が理解できなかった方法を使用しています。私は簡単なfiddleでこのメソッドを使用していますが、それはツールチップ内のHTMLを動作しませんでした。

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

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
    ['Statistics', 'Amount', { role: 'style' } , { role: 'tooltip' }], 
    ['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"], 
    ['Posts', 4, '#337AB7' , 'my tooltip'], 
    ['Comments', 8, '#5CB85C' ,'<div>fff</div>'], 
    ['Users', 3, '#F0AD4E' , '<b>hhh</b>'], 
    ]); 

var options = { 
    chart: { 
    title: 'Analysis', 
    tooltip: { isHtml: true}, 
    subtitle: '', 
    }, 
/* colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/ 
    bars: 'horizontal' // Required for Material Bar Charts. 
}; 

var chart = new google.visualization.BarChart(document.getElementById('barchart_material')); 

chart.draw(data, options); 
} 

Js Fiddle here

おかげで、誰かが私が編集してvotingdown :)の前に何かを追加することができ、質問がある場合は希望。

Answer 1

まず、... クラシックと材質チャートの違いを理解する必要が

クラシック = google.visualization.BarChartからpackages: ['corechart']

材質 = google.charts.Bar - packages: ['bar']

材質のチャートは列の役割をサポートしていません - クラシックチャート上のHTMLツールチップのために必要な2つのものがある次の

{role: 'style'} , {role: 'tooltip'}

---

、...

1）列のプロパティをしなければなりません存在 - {role: 'tooltip', p: {html: true}}

2）とチャートのオプション - tooltip: { isHtml: true}

は、しかし、それはいけませんのみ
（chart: {}を除く）

var options = { 
    title: 'Analysis', 
    tooltip: { isHtml: true} 
}; 

---

作業スニペット以下を参照してください。材質チャートですchartオプション、...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Statistics', 'Amount', {role: 'style'} , {role: 'tooltip', p: {html: true}}], 
 
    ['Categories', 5, '#D9534F' , "<img src='https://upload.wikimedia.org/wikipedia/commons/5/52/Xylocopa_virginica_male_face.jpg' width='40px' height = '40px'/>"], 
 
    ['Posts', 4, '#337AB7' , 'my tooltip'], 
 
    ['Comments', 8, '#5CB85C' ,'<div>fff</div>'], 
 
    ['Users', 3, '#F0AD4E' , '<b>hhh</b>'], 
 
    ]); 
 

 
    var options = { 
 
    title: 'Analysis', 
 
    tooltip: { isHtml: true} 
 
    }; 
 

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

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