Thêm văn bản tùy chỉnh vào chú giải công cụ Google Visualization

Question

Tôi cần thêm một hàng văn bản khác trên mỗi chú giải công cụ tôi đang hiển thị (trên biểu đồ vùng). Tôi đã bao gồm một ảnh chụp màn hình để minh họa những gì tôi hy vọng sẽ làm.

Biểu đồ hiện tại của tôi: Biểu đồ có văn bản bổ sung được thêm vào. (Đây là những gì tôi đang cố gắng làm):

Tôi hy vọng sẽ làm điều này mà không cần phải sử dụng JS của bên thứ ba cho chú giải công cụ tùy chỉnh. Có cách nào để thêm một hàng nội dung dựa trên văn bản khác để hiển thị trong chú giải công cụ mặc định không?

Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Có một cái nhìn tại https://developers.google.com/chart/interactive/docs/roles#whatrolesavailable: hàng tooltip

bổ sung là những gì bạn đang tìm kiếm!

Ví dụ:

 
label: 'Year', 'Sales', null, 'Expenses', null 
role: domain,  data, tooltip, data,  tooltip  
     '2004', 1000, '1M$ sales,  400, '$0.4M expenses 
          in 2004'     in 2004' 
     '2005', 1170, '1.17M$ sales, 460, '$0.46M expenses 
          in 2005'     in 2005' 
     '2006',  660, '.66$ sales, 1120,  '$1.12M expenses 
          in 2006'     in 2006' 
     '2007', 1030, '1.03M$ sales, 540, '$0.54M expenses 
          in 2007'     in 2007' 

Answer 2

Nếu bạn kích hoạt focusTarget: 'category' trong các tùy chọn. Sau đó, cột tooltip trở thành value cho chú giải công cụ của các dấu chấm hiện tại x, y (được hiển thị theo cách bạn muốn). Vì vậy, bạn có thể bắt chước value và thêm văn bản bổ sung mà bạn muốn. Dưới đây là ví dụ về ý tôi: -

google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Year'); 
    dataTable.addColumn('number', 'Sales'); 
    // A column for custom tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addRows([ 
     ['2010', 600,'600: 15% growth'], 
     ['2011', 1500, '1500: 50% growth'], 
     ['2012', 800, '800: -40% growth'], 
     ['2013', 1000, '1000: 25% growth'] 
    ]); 

    var options = { legend: 'none', focusTarget: 'category'}; 
    var chart = new google.visualization.ColumnChart(document.getElementById('col_chart_custom_tooltip')); 
    chart.draw(dataTable, options); 
    } 

Answer 3

Tôi chưa tìm cách thêm hàng dữ liệu khác vào chú giải công cụ mặc định. Bạn có thể đến gần với những gì bạn đang tìm kiếm bằng cách sử dụng chú giải công cụ HTML. Bạn sẽ mất đuôi trên chú giải công cụ. Đây là một JSbin với giải pháp tôi sử dụng ... http://jsbin.com/tovizukabu/3/edit?css,js,output

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Year'); 
    dataTable.addColumn('number', 'Sales'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 
    dataTable.addColumn('number', 'Expense'); 
    dataTable.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}}); 

    dataTable.addRows([ 
     ['2010', 1500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 600,'<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$600</strong></div>'], 
     ['2011', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1500, '<div><strong>2011</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,500</strong></div>'], 
     ['2012', 1200, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 800, '<div><strong>2012</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$800</strong></div>'], 
     ['2013', 500, '<div><strong>2010</strong><br>Date: <strong>00/00/0000</strong><br>Sales: <strong>$600</strong></div>', 1000, '<div><strong>2013</strong><br>Date: <strong>00/00/0000</strong><br>Expense: <strong>$1,000</strong></div>'] 
    ]); 

    var options = {tooltip: {isHtml: true}}; 
    var chart = new google.visualization.AreaChart (document.getElementById('tooltip_action')); 
    chart.draw(dataTable, options); 
    } 

Và CSS ...

.google-visualization-tooltip { 
border: solid 1px #bdbdbd; 
border-radius: 2px; 
background-color: white; 
position: absolute; 
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-size: 11px; 
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6); 
font-family: arial; 
} 

.google-visualization-tooltip div { 
    padding:5px; 
}