Thêm tooltips đến một Chart với nhiều loạt dữ liệu Google Line - với trường hợp kiểm tra đơn giản và ảnh chụp màn hình

Tôi có một Google Line Chart với 2 loạt dữ liệu - Row A và Row B:Thêm tooltips đến một Chart với nhiều loạt dữ liệu Google Line - với trường hợp kiểm tra đơn giản và ảnh chụp màn hình

enter image description here

Đây là mã kiểm tra rất đơn giản - chỉ cần mở nó trong trình duyệt và nó sẽ làm việc:

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
<script type="text/javascript"> 

     var data = {"rows":[ 
     {"c":[{"v":"C"},{"v":-43},{"v":-42}]}, 
     {"c":[{"v":"D"},{"v":-49},{"v":-39}]}, 
     {"c":[{"v":"E"},{"v":-49},{"v":-48}]}, 
     {"c":[{"v":"F"},{"v":-50},{"v":-49}]}, 
     {"c":[{"v":"G"},{"v":-57},{"v":-56}]}], 

     "cols":[ 
     {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"}, 
     {"p":{"role":"data"},"label":"Row A","type":"number"}, 
     {"p":{"role":"data"},"label":"Row B","type":"number"}]}; 

     function drawCharts() { 
      var x = new google.visualization.DataTable(data); 

      var options = { 
       title: 'How to add tooltips?', 
       width: 800, 
       height: 600 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById('test')); 
      chart.draw(x, options); 
     } 

     $(function() { 
      google.setOnLoadCallback(drawCharts); 
     }); 

</script> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html>

tôi muốn thêm tooltips để mỗi điểm dữ liệu, mà sẽ ví dụ hiển thị:

Row A: x = D y = -49

trên di chuột. Và tôi không thể sử dụng dataTable.addColumn, vì biểu đồ của tôi được tạo ra cùng một lúc bằng một tập lệnh perl và tôi chỉ sử dụng một đối tượng data với cols và rows như trên.

Có ai biết, làm thế nào để làm điều đó ở đây?

Nguồn

2013-07-29 Alexander Farber

Bạn có thể sử dụng một DataView để tạo các cột chú giải công cụ cho bạn. Đoạn mã này sẽ tự động tạo ra một cột tooltip trong DataView cho mỗi loạt dữ liệu:

var columns = [0]; 
for (var i = 1; i < x.getNumberOfColumns(); i++) { 
    columns.push(i); 
    columns.push({ 
     type: 'string', 
     properties: { 
      role: 'tooltip' 
     }, 
     calc: (function (j) { 
      return function (dt, row) { 
       return dt.getColumnLabel(j) + ': x=' + dt.getValue(row, 0) + ' y=' + dt.getValue(row, j) 
      } 
     })(i) 
    }); 
} 
var view = new google.visualization.DataView(x); 
view.setColumns(columns);

Xem ví dụ làm việc ở đây: http://jsfiddle.net/asgallant/xWwxP/

Nguồn

2013-07-29 19:20:24 asgallant

Thêm tooltips đến một Chart với nhiều loạt dữ liệu Google Line - với trường hợp kiểm tra đơn giản và ảnh chụp màn hình

Trả lời

Các vấn đề liên quan