使用JSON数据时，如何在Google Charts中制作工具提示html？-Java 学习之路

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

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

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
123","f":null}]}, 
            ?>
        ]
}

不幸的是，尽管在工具提示中显示了html，我仍然得到一个糟糕的工具提示：

enter image description here

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

编辑：

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

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);

这确实使传说消失了，所以我确信这个选项是考虑在内的，但是
仍显示在工具提示中

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>

回复于 2024-05-01T04:07:36+08:00

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

1 回答

相关问题