javascript - 使用JSON数据时，如何在Google Charts中制作工具提示html？

Question

我目前正在尝试构建 Google 图表并使用 HTML 工具提示。

问题已经提出，我已经看到答案，请参阅:

Google Charts - full html in tooltips

Tooltip in Google Chart while populating chart using JSON

Adding property in php datatable for google chart custom html tooltips

不幸的是，我的情况有点不同，因为我使用的是 JSON 数据。

所以，我使用的代码是:

{
  "cols": [
            {"id":"","label":"Graph","pattern":"","type":"number"},
            {"id":"","pattern":"","type":"number"},
            {"id":"","type":"string","role":"tooltip","p":{"html":true}}  
        ],
  "rows": [
            <?php
                // DO THE PHP LOGIC
                // My line is somethjing like  {"c":[{"v":4150,"f":null},{"v":20,"f":null},{"v":"AF545PM/1500<br/>123","f":null}]}, 
            ?>
        ]
}

不幸的是，尽管在工具提示中显示了 html，我仍然得到一个显示错误的工具提示:

知道我可以做些什么来解决这个问题吗？

编辑:

关于第一条评论，我在图表中添加了:

  var data = new google.visualization.DataTable(jsonData);
  var options = {
      tooltip: {isHtml: true},
      legend: 'none'
    };
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);

这确实使图例消失了，所以我确信该选项已被考虑在内，但
仍显示在工具提示中

Answer 1

以下内容必须到位，html 工具提示才能正确显示

工具提示列应包含 html 属性(如帖子中所示)
{"id":"","type":"string","role":"tooltip","p":{"html":true}}

配置选项应包括

  tooltip: {
    isHtml: true
  }

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var jsonData = {
      "cols": [
        {"id":"","label":"Graph","pattern":"","type":"number"},
        {"id":"","pattern":"","type":"number"},
        {"id":"","type":"string","role":"tooltip","p":{"html":true}}
      ],
      "rows": [
        {"c":[{"v": 1}, {"v": 1}, {"v": "<div class='ggl-tooltip'><div>test 1</div><div>test 1</div></div>"}]},
        {"c":[{"v": 2}, {"v": 2}, {"v": "<div class='ggl-tooltip'><div>test 2</div><div>test 2</div></div>"}]}
      ]
    };

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

    var options = {
      tooltip: {
        isHtml: true
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages:['corechart']
});

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
  padding-top: 6px;
}

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