Question

我尝试使用Google图表显示饼图，在工具提示中使用HTML 我遇到的问题是HTML源代码正在显示。我在数据栏中设置了html：true，我在选项中设置了tooltip.isHtml，我真的不确定现在还要尝试什么！这是我的JS来源：

google.setOnLoadCallback( drawChart_1 );
function drawChart_1() {
  var data = google.visualization.arrayToDataTable( [
['','',''],
['Thing 1' , 200 , '<b>Thing 1</b><br/>&pound;200 (14%)' ],
['Thing 2' , 400 , '<b>Thing 2</b><br/>&pound;400 (29%)' ],
['Thing 3' , 600 , '<b>Thing 3</b><br/>&pound;600 (43%)' ],
['Thing 4' , 200 , '<b>Thing 4</b><br/>&pound;200 (14%)' ],
]);
data.setColumnProperty(2,'role','tooltip');
data.setColumnProperty(2,'html','true');
data.setColumnProperty(2,'p',{'html':true});  // tried with, and without this (and the next) line
//data.setColumnProperty(2,'properties',{'html':true});

  var options = {"height":300,"pieSliceText":"none","tooltip.isHtml":true,"pieHole":0.5,"legend":"none","pieSliceTextStyle":"none","chartArea":{"width":"100%","height":"80%"},"slices":[{"color":"#959595"},{"color":"#616161"},{"color":"#005131"},{"color":"#e2e2e2"}]};
  var chart = new google.visualization.PieChart( document.getElementById( 'piechart_div_1' ) );
  chart.draw( data , options );
}

那么，有没有人知道我在哪里出错？搜索这个问题只是指向我将tooltip.isHtml设置为true的方向，我已经完成了。一些结果指出了我在数据列上设置html：true的方向 - 在代码中，你可以看到几次尝试，这些都没有影响。

Answer 1

几件事......

首先，您可以在数组中提供列定义

var data = google.visualization.arrayToDataTable([
  ['' , '' , {type:"string" , role:"tooltip" , p:{"html":true}}],
  ...
]);

并且肯定需要p:{"html":true}

接下来，在options中，tooltip应该是一个带键的对象

  "tooltip": {
    "isHtml":true
  },

VS。

"tooltip.isHtml":true

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['','',{type:"string",role:"tooltip",p:{"html":true}}],
      ['Thing 1' , 200 , '<b>Thing 1</b><br/>&pound;200 (14%)' ],
      ['Thing 2' , 400 , '<b>Thing 2</b><br/>&pound;400 (29%)' ],
      ['Thing 3' , 600 , '<b>Thing 3</b><br/>&pound;600 (43%)' ],
      ['Thing 4' , 200 , '<b>Thing 4</b><br/>&pound;200 (14%)' ],
    ]);

    var options = {
      "height":300,
      "pieSliceText":"none",
      "tooltip": {
        "isHtml":true
      },
      "pieHole":0.5,
      "legend":"none",
      "pieSliceTextStyle":"none",
      "chartArea":{
        "width":"100%",
        "height":"80%"
      },
      "slices":[
        {"color":"#959595"},
        {"color":"#616161"},
        {"color":"#005131"},
        {"color":"#e2e2e2"}
      ]
    };
    var chart = new google.visualization.PieChart( document.getElementById( 'piechart_div_1' ) );
    chart.draw( data , options );
  },
  packages: ['corechart']
});

＆＃13;

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

＆＃13;

Google Charts - 在工具提示中显示HTML源代码

1 个答案: