Javascript 谷歌图表与工具提示和颜色

我看过一篇文章，它展示了如何制作颜色，但它使用了一种我不理解的方法，这对我来说有点困难。我在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);
 }

google.charts.load（'current'，{'packages'：['corechart'，'bar']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Statistics'，'Amount'，{role:'style'}，{role:'tooltip'}]，
[Categories'，5'，#D9534F'，”，
['Posts'，4'，#337AB7'，'my tooltip']，
[Comments'，8'，#5CB85C'，fff']，
[Users'，3'，#F0AD4E'，hhh']，
]);
变量选项={
图表：{
标题:"分析",，
工具提示：{isHtml:true}，
副标题：“”，
},
/*颜色：['#e0440e'、'#e6693e'、'#ec8f6e'、'#f3b49f'、'#f6c7b6']，//另一种着色方法*/
条形图：“水平”//材质条形图需要。
};
var chart=new google.visualization.BarChart（document.getElementById（'BarChart_material'）；
图表绘制（数据、选项）；
}

---

谢谢，如果有人有问题，我可以在下一篇之前编辑并添加一些内容：）。

首先，需要了解经典图表和材质图表之间的区别

Classic=

google.visualization.BarChart

--

软件包：['corechart']

Material=

google.charts.Bar

--

packages:['Bar']

材质图表不支持列角色--

{role:'style'}，{role:'tooltip'}

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

---

接下来，经典图表上的html工具提示需要两件事

1） 列上的属性必须存在--

{role:'tooltip'，p:{html:true}

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

2） 以及图表选项--

工具提示：{isHtml:true}

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

但是，它不应位于

图表

选项内，该选项仅适用于物料图表
（删除

图表：{}

）

---

请参阅以下工作片段

google.charts.load（'current'，{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Statistics'，'Amount'，{role:'style'}，{role:'tooltip'，p:{html:true}]，
[Categories'，5'，#D9534F'，”，
['Posts'，4'，#337AB7'，'my tooltip']，
[Comments'，8'，#5CB85C'，fff']，
[Users'，3'，#F0AD4E'，hhh']，
]);
变量选项={
标题:"分析",，
工具提示：{isHtml:true}
};
var chart=new google.visualization.BarChart（document.getElementById（'BarChart'）；
图表绘制（数据、选项）；
}

它不仅帮助了：）它还帮助了x 2+2:）。谢谢你，查特医生。