Google Chart自定义tooltip设置isHtml:true后仍无法渲染为HTML如何解决

• 配置项层级错误：tooltip: { isHtml: true } 属于图表全局配置项，你当前将其写在vAxis的子配置中，不会生效，需要移到options的最外层。
• 自定义tooltip列属性值类型错误：你给索引为3的tooltip列设置html属性时，传入的是字符串'true'，Google Chart要求该属性必须为布尔值true才会识别为HTML内容。
• 额外配置错位：focusTarget: 'category'同样是全局配置，放在vAxis下不会生效，如果你需要按分类整组触发tooltip，需要将该配置也移到options顶层。

首先修改tooltip列的属性设置：

data.setColumnProperty(3, 'role', 'tooltip');
data.setColumnProperty(3, 'html', true); // 将字符串'true'改为布尔值true

然后修改options配置：

var options = {
  title: 'Weight mot Date',
  legend: 'none',
  bar: {
    groupWidth: '95%'
  },
  tooltip: { isHtml: true }, // 移到options顶层
  focusTarget: 'category', // 移到options顶层
  hAxis: {
    title: 'Date',
    format: 'yyy-MM-dd',
  },
  vAxis: {
    title: 'Weight',
    viewWindow: {
      max: 100,
      min: 0,
    },
    ticks: [0, 25, 50, 75, 100]
  }
};

修改完成后红色折线的自定义tooltip就可以正常渲染HTML格式内容了。

内容的提问来源于stack exchange，提问作者Rawland Hustle