Question

我试图在条形图上显示自定义工具提示，它始终显示默认工具提示。我只是想在工具提示中显示一个简单的html代码，所以我可以在之后修改它我错过了什么？感谢

＆＃13;

 google.charts.load('current', {
   'packages': ['timeline'],
   'language': 'fr'
 });
 google.charts.setOnLoadCallback(drawChart);


 function drawChart() {
   var container = document.getElementById('timeline');
   var chart = new google.visualization.Timeline(container);
   var dataTable = new google.visualization.DataTable();

   dataTable.addColumn({
     type: 'string',
     id: 'Code'
   });
   dataTable.addColumn({
     type: 'string',
     id: 'Color'
   });
   dataTable.addColumn({
     type: 'string',
     role: 'tooltip',
     'p': {
       'html': true
     }
   });
   dataTable.addColumn({
     type: 'string',
     id: 'Libelle'
   });
   dataTable.addColumn({
     type: 'date',
     id: 'Start'
   });
   dataTable.addColumn({
     type: 'date',
     id: 'End'
   });



   var objects = [];
   objects.push({
     code: "PRV1001",
     color: "Color1",
     zz: "<div><strong>2010</strong></div>",
     id: "PRV1001",
     dateStart: new Date(2016, 3, 1),
     dateFinnish: new Date(2016, 3, 15)
   });
   objects.push({
     code: "PRV1002",
     color: "Color2",
     zz: "<div><strong>2010</strong></div>",
     id: "PRV1002",
     dateStart: new Date(2016, 3, 4),
     dateFinnish: new Date(2016, 3, 9)
   });
   objects.push({
     code: "PRV1003",
     color: "Color3",
     zz: "<div><strong>2010</strong></div>",
     id: "PRV1003",
     dateStart: new Date(2016, 3, 3),
     dateFinnish: new Date(2016, 3, 12)
   });



   var rows = [];
   for (var i = 0; i < objects.length; i++) {
     rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
   }

   console.log(rows);
   dataTable.addRows(rows);
   /****************Colors*************************/
   var colors = [];
   var colorMap = {
     // should contain a map of category -> color for every category
     Color1: '#e63b6f',
     Color2: '#19c362',
     Color3: '#592df7'
   }

   for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
     colors.push(colorMap[dataTable.getValue(i, 1)]);
   }

   var options = {
     colors: colors,
     focusTarget: 'category',
     tooltip: {
       //trigger: 'none'
       isHtml: true
     }
   };

   
   google.visualization.events.addListener(chart, 'select', function() {
     selection = chart.getSelection();
     if (selection.length > 0) {
       console.log(dataTable.getValue(selection[0].row, 0));
     }
   });
   


   // use a DataView to hide the category column from the Timeline
   var view = new google.visualization.DataView(dataTable);
   view.setColumns([0, 2, 3, 4, 5]);


   chart.draw(view, options);
 }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
  <div id="timeline" style="height: 180px;"></div>
</body>
</html>

＆＃13;

Answer 1

请参阅data format了解时间表...

第0列 - 行标签
  第1栏 - 条形标签（可选）
  第2栏 - 工具提示（可选）
  第3栏 - 开始
  第4栏 - 结束

问题源自于......的观点 view.setColumns([0, 2, 3, 4, 5]);

因此图表认为第2列是条形标签

可以通过将3列交换为2来纠正问题 view.setColumns([0, 3, 2, 4, 5]);

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

＆＃13;

google.charts.load('current', {
   'packages': ['timeline'],
   'language': 'fr'
 });
 google.charts.setOnLoadCallback(drawChart);


 function drawChart() {
   var container = document.getElementById('timeline');
   var chart = new google.visualization.Timeline(container);
   var dataTable = new google.visualization.DataTable();

   dataTable.addColumn({
     type: 'string',
     id: 'Code'
   });
   dataTable.addColumn({
     type: 'string',
     id: 'Color'
   });
   dataTable.addColumn({
     type: 'string',
     role: 'tooltip',
     'p': {
       'html': true
     }
   });
   dataTable.addColumn({
     type: 'string',
     id: 'Libelle'
   });
   dataTable.addColumn({
     type: 'date',
     id: 'Start'
   });
   dataTable.addColumn({
     type: 'date',
     id: 'End'
   });



   var objects = [];
   objects.push({
     code: "PRV1001",
     color: "Color1",
     zz: "<div><strong>2010</strong></div>",
     id: "PRV1001",
     dateStart: new Date(2016, 3, 1),
     dateFinnish: new Date(2016, 3, 15)
   });
   objects.push({
     code: "PRV1002",
     color: "Color2",
     zz: "<div><strong>2010</strong></div>",
     id: "PRV1002",
     dateStart: new Date(2016, 3, 4),
     dateFinnish: new Date(2016, 3, 9)
   });
   objects.push({
     code: "PRV1003",
     color: "Color3",
     zz: "<div><strong>2010</strong></div>",
     id: "PRV1003",
     dateStart: new Date(2016, 3, 3),
     dateFinnish: new Date(2016, 3, 12)
   });



   var rows = [];
   for (var i = 0; i < objects.length; i++) {
     rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
   }

   dataTable.addRows(rows);
   /****************Colors*************************/
   var colors = [];
   var colorMap = {
     // should contain a map of category -> color for every category
     Color1: '#e63b6f',
     Color2: '#19c362',
     Color3: '#592df7'
   }

   for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
     colors.push(colorMap[dataTable.getValue(i, 1)]);
   }

   var options = {
     colors: colors,
     focusTarget: 'category',
     tooltip: {
       isHtml: true
     }
   };


   google.visualization.events.addListener(chart, 'select', function() {
     selection = chart.getSelection();
     if (selection.length > 0) {
       console.log(dataTable.getValue(selection[0].row, 0));
     }
   });



   // use a DataView to hide the category column from the Timeline
   var view = new google.visualization.DataView(dataTable);
   view.setColumns([0, 3, 2, 4, 5]);


   chart.draw(view, options);
 }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
  <div id="timeline" style="height: 180px;"></div>
</body>
</html>

＆＃13;

为什么自定义工具提示不会显示？

1 个答案: