Question

我必须绘制diff饼图并显示自定义工具提示文本，而不是默认的Old和Current值。这是我使用的代码。我应该更改什么来显示“我的工具提示”和“我的另一个工具提示”而不是默认的文本文本？

var d = new google.visualization.DataTable({"cols": [
{"type": "string" ,"id": "Title"   ,"label": "Title" }, 
{"type": "number" ,"id": "Count" ,"label": "Count", "p": {"role" : "old-data"} },
{"type": "number" ,"id": "Count" ,"label": "Count", "p": {"role" : "data"} }, 
{"type": "string" ,"id": "Tooltip" ,"label": "Tooltip" , "p": {"role" : "tooltip"}}], 
"rows" : [
{"c" : [{"v": "Item1"}, {"v": 0}, {"v": 28}, {"v": "my tooltip"}]}, 
{"c" : [{"v": "Item2"}, {"v": 80}, {"v": 0}, {"v": "my another tooltip"}]}]});

var options = { pieSliceText: 'none', diff: { innerCircle: { radiusFactor: 0.3 } },    sliceVisibilityThreshold: 0, pieSliceText: 'label'};

var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));
chartDiff.draw(d, options);

Answer 1

长期以来一直困扰着这个问题。最后得到了一个修复它的黑客。她是我的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var oldData = google.visualization.arrayToDataTable([
      ['Status', 'Percentage'],
      ['Error', 60], ['Success', 40]]);

    var newData = google.visualization.arrayToDataTable([
      ['Status', 'Percentage'],
      ['Error', 80], ['Success', 20]]);

    var options = {
	    tooltip: { isHtml: true }
  	}
    var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

    var diffData = chartDiff.computeDiff(oldData, newData);

    google.visualization.events.addListener(chartDiff,'onmouseover',selectHandler);

    function selectHandler(){
      console.log("Entered");
      $('#piechart_diff').on("DOMNodeInserted",function(e){
    	  //console.log(e.target);
        if($(e.target).is('.google-visualization-tooltip')){
        	console.log(document.getElementsByClassName('google-visualization-tooltip-item')[1].getElementsByTagName('span')[0].innerHTML);
        	document.getElementsByClassName('google-visualization-tooltip-item')[1].getElementsByTagName('span')[0].innerHTML = 'Test1 :';
        	document.getElementsByClassName('google-visualization-tooltip-item')[2].getElementsByTagName('span')[0].innerHTML = "Test2 :";
          //console.log(e);
          //e.target.innerHTML = "<p>test1 error :"+te1+"%<br />test2 error :"+te2+"%</p>";
        }
      })
    }

    chartDiff.draw(diffData, options);
  }
</script>

<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>

主要技巧是添加工具提示：{isHtml：true}然后遍历直到我们找到工具提示

Answer 2

如果您的工具提示每行都没有更改，那么您可以使用图表选项（适用于您的选项）：

var options = {
  pieSliceText: 'none',
  diff: {
    innerCircle: {
      radiusFactor: 0.3
    },
    oldData: {
      tooltip: {
        prefix: 'my tooltip'
      }
    },
    newData: {
      tooltip: {
        prefix: 'my another tooltip'
      }
    }
  },
  sliceVisibilityThreshold: 0,
  pieSliceText: 'label'

};

在没有丑陋的DOM操作黑客的情况下，目前似乎没有每行工具提示或注释自定义。

工作演示＆amp;来源（很容易改变为PieChart）：

带有自定义工具提示的Google Charts Diff Chart

2 个答案: