带有工具提示和颜色的 Google 图表

Question

我看过一篇文章，它展示了如何制作颜色，但它使用了一种我不明白的方法，对我来说有点困难。我在小提琴中使用这种方法很容易但它在工具提示中不起作用 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

谢谢，希望如果有人有问题，我可以在投票之前编辑并添加一些内容:)。

Answer 1

首先，需要了解Classic和Material图表的区别...

经典 = google.visualization.BarChart -- packages: ['corechart']

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

材料图表不支持列角色 -- {role: 'style'} , {role: 'tooltip'}

---

接下来，Classic 图表上的 html 工具提示需要做两件事...

1) 列上的属性必须存在 -- {role: 'tooltip', p: {html: true}}

2) 和图表选项 -- tooltip: { isHtml: true}

但是，它不应包含在 chart 选项中，该选项仅适用于材料图表
（删除chart: {}）

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

---

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

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>