Google Charts: Setzen Sie den Fokus auf die Datenspalte im Säulendiagramm.

Question

Ich erstelle eine benutzerdefinierte Legende für ein Google Charts ColumnChart. Ich möchte, dass es dasselbe Verhalten wie die native Legende hat. Die native Legende hat Verhalten bei Klick und Mouseover. Wenn auf einen Legendenschlüssel geklickt wird, wird die Wertespalte ausgewählt. Ich kann in meiner benutzerdefinierten Legende tut dies, indem

myChartWrapper.getChart().setSelection([{column: 4}]); 

Aufruf Wenn eine Legende Taste wird die Spalte von Werten über moused, einen Überblick bekommt. Ich möchte den gleichen Umriss auslösen, wenn ich den Schlüssel in meiner benutzerdefinierten Legende überstreiche.

Gibt es eine Möglichkeit, diese fokussierte Spalte ähnlich wie die Auswahl festzulegen?

Ich dachte, ich könnte es tun, indem ich events.trigger() aufrufen, aber ich kann nichts damit überhaupt passieren. Zum Beispiel scheinen diese nichts zu tun.

// did nothing: 
google.visualization.events.trigger(myChartWrapper, 'select', [{column: 4}]); 

// did nothing: 
google.visualization.events.trigger(myChartWrapper.getChart(), 'onmouseover', [{column: 4}]); 

Answer 1

Versuch Fokus Aussehen über Ereignisauslöser

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Month', type: 'string'}, 
 
     {label: 'Amount', type: 'number'} 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 'April'}, {v: 279899811.34}]}, 
 
     {c:[{v: 'May'}, {v: 205855811}]}, 
 
     {c:[{v: 'June'}, {v: 10009811}]}, 
 
     {c:[{v: 'July'}, {v: 79979811}]}, 
 
     {c:[{v: 'August'}, {v: 175789911}]}, 
 
     {c:[{v: 'September'}, {v: 99899811}]}, 
 
     {c:[{v: 'October'}, {v: 149899811}]}, 
 
     {c:[{v: 'November'}, {v: 80899811}]}, 
 
     {c:[{v: 'December'}, {v: 60899811}]}, 
 
     {c:[{v: 'January'}, {v: 225899811}]}, 
 
     {c:[{v: 'February'}, {v: 148899811}]}, 
 
     {c:[{v: 'March'}, {v: 150899811}]} 
 
     ] 
 
    }); 
 

 
    var chartWrapper = new google.visualization.ChartWrapper({ 
 
     chartType: 'ColumnChart', 
 
     containerId: 'chart_div', 
 
     dataTable: dataTable, 
 
     options: { 
 
     legend: { 
 
      position: 'bottom' 
 
     }, 
 
     vAxis: { 
 
      format: 'short' 
 
     } 
 
     } 
 
    }); 
 

 
    google.visualization.events.addOneTimeListener(chartWrapper, 'ready', function() { 
 
     // mouseover for custom div 
 
     document.getElementById('hover_div').addEventListener('mouseover', function() { 
 
     // trigger onmouseover for chart, pass props 
 
     google.visualization.events.trigger(chartWrapper.getChart(), 'onmouseover', { 
 
      'column': 1, 
 
      'row': null, 
 
      'test': 'over' 
 
     }); 
 
     }, false); 
 

 
     // mouseout 
 
     document.getElementById('hover_div').addEventListener('mouseout', function() { 
 
     google.visualization.events.trigger(chartWrapper.getChart(), 'onmouseout', { 
 
      'column': 1, 
 
      'row': null, 
 
      'test': 'out' 
 
     }); 
 
     }, false); 
 

 
     // chart event listeners 
 
     google.visualization.events.addListener(chartWrapper.getChart(), 'onmouseover', function (props) { 
 
     document.getElementById('msg_div').innerHTML = JSON.stringify(props); 
 
     }); 
 
     google.visualization.events.addListener(chartWrapper.getChart(), 'onmouseout', function (props) { 
 
     document.getElementById('msg_div').innerHTML = JSON.stringify(props); 
 
     }); 
 
    }); 
 

 
    chartWrapper.draw(); 
 
    }, 
 
    packages:['controls', 'corechart'] 
 
});

#hover_div { 
 
    background-color: magenta; 
 
    border: 1px solid lime; 
 
    color: cyan; 
 
    height: 200px; 
 
    text-align: center; 
 
    width: 200px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div> 
 
<div id="hover_div">HOVER THIS DIV</div> 
 
<div id="msg_div"></div>

Answer 2

hier ein hacky Weg zu markieren Balken in einem Balkendiagramm zu verursachen. Es ist keine richtige Lösung, da es die native Hervorhebung des Diagramms nicht auslöst. Stattdessen können Sie Ihre eigene Hervorhebung erstellen, indem Sie die Kontur der Verweise mit jQuery manipulieren. Ich habe das Highlight angenähert, indem ich den Strich auf 2px und grau gesetzt habe. Das eigentliche Highlight scheint ein Unschärfe-Effekt mit Svg zu sein. Um die Hervorhebung zu verbessern, habe ich eine leichte Transparenz auf die Rezkte selbst angewendet.

Bei Mouseover, bekomme ich die Menge der Rectures für alle Bars, und dann die Teilmenge für die jeweilige Spalte. Es stellte sich heraus, dass es schwierig war, den richtigen Satz von Rezepten beim Mouseover zu bekommen, weil der Benutzer möglicherweise einen Balken ausgewählt hatte. Wenn Sie einen Balken mit der Maus auswählen (d. H., Klicken Sie darauf), bewegt sich der Rechteck für ihn herum, so dass Sie jedes Mal, wenn Sie den Mauszeiger darüber bewegen, die Objekte neu auswählen müssen. Plus-Auswahl fügt ein weiteres Rechteck für den weißen Umriss hinzu, der herausgefiltert werden muss.

Für die benutzerdefinierte Legende verwendete ich Farben aus der Google Charts-Palette, die Sie here erhalten.

Ich habe den Teil nicht hinzugefügt, der beim Klicken auf die Legende eine Auswahl auslösen würde. Dafür werde ich this method folgen.

Die Lösung funktioniert auch nur mit Balkendiagrammen. Sie müssen etwas anderes mit Liniendiagrammen oder anderen Typen machen. Daher kann der Wert dieser Lösung begrenzt sein.

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

 
\t function draw_chart() { 
 
\t \t // Create DataTable object from DataTable constructor or arrayToDatable() 
 
\t \t var data = new google.visualization.DataTable({"rows":[{"c":[{"v":"Sacramento"},{"v":97},{"v":79},{"v":67},{"v":100}]},{"c":[{"v":"Montpelier"},{"v":96},{"v":74},{"v":32},{"v":96}]},{"c":[{"v":"Juneau"},{"v":24},{"v":44},{"v":54},{"v":64}]},{"c":[{"v":"Montgomery"},{"v":26},{"v":69},{"v":51},{"v":56}]},{"c":[{"v":"Little Rock"},{"v":87},{"v":69},{"v":78},{"v":41}]}],"cols":[{"type":"string","id":"cities","label":"cities"},{"type":"number","id":"A","label":"A"},{"type":"number","id":"B","label":"B"},{"type":"number","id":"C","label":"C"},{"type":"number","id":"D","label":"D"}]}); 
 
     
 
\t \t // Add formatters, if any 
 

 
\t \t // Create ChartWrapper 
 
\t \t var my_chart = new google.visualization.ChartWrapper({  
 
\t \t \t "containerId": "chart_id", 
 
\t \t \t "dataTable": data, 
 
\t \t \t "chartType": "ColumnChart", 
 
\t \t \t "options": {"bar": {"groupWidth": 67}, "chartArea": {"width": 440, "top": 20, "height": 295, "left": 60}, "height": 375, "width": 500, "fontSize": 12, "legend": "none"} 
 
\t \t }); 
 
    
 
\t \t var bar_rect_set; 
 
\t \t var num_rows = 5; 
 
\t \t var num_cols = 4; 
 
\t \t var num_series = num_rows * num_cols; 
 
\t \t var parent_g; 
 
\t \t \t 
 
\t \t function get_bar_rect_set() { 
 
\t \t \t // get all the rects in the parent except for the white outline rects 
 
\t \t \t // on selected bars, if any. 
 
\t \t \t bar_rect_set = parent_g.find('rect[fill!="#ffffff"]'); \t \t \t \t 
 
\t \t } 
 
\t \t google.visualization.events.addOneTimeListener(my_chart, 'ready', function() { 
 
\t \t \t // Get an initial collection of the bar rects, along with their parent. 
 
\t \t \t // Hereafter, get the bar rects with the method above. 
 
\t \t \t \t \t \t \t 
 
\t \t \t // get all rects three layers down, including gridlines and axis 
 
\t \t \t var g_set_1 = $("svg g g g rect"); 
 
\t \t \t // slice out the gridlines at the beginning and the axis line at the end 
 
\t \t \t bar_rect_set = g_set_1.slice(g_set_1.length - num_series - 1, g_set_1.length - 1); 
 
\t \t \t parent_g = $(bar_rect_set[0]).parent(); 
 
\t \t }); 
 
\t \t \t 
 
\t \t my_chart.draw(); 
 

 
\t \t function highlight_bars(series_num) { 
 
\t \t \t if (series_num > num_cols - 1) { 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t get_bar_rect_set(); 
 
\t \t \t var start_index = series_num * num_rows; 
 
\t \t \t var end_index = start_index + num_rows; 
 

 
\t \t \t var series_g_set = bar_rect_set.slice(start_index, end_index) 
 
\t \t \t var styles = {'stroke-width': "1.5px", "stroke": "#AAAAAA", "opacity": .8}; 
 
\t \t \t series_g_set.css(styles); 
 
\t \t } 
 
\t \t \t 
 
\t \t function remove_highlight() { 
 
\t \t \t var styles = {'stroke-width': "0", "opacity": 1}; 
 
\t \t \t bar_rect_set.css(styles); 
 
\t \t } 
 
\t \t 
 
\t \t $("#legend tr").each(function(index, row) { 
 
\t \t \t $(row).mouseover(function() { 
 
\t \t \t \t highlight_bars(index); 
 
\t \t \t }).mouseout(function() { 
 
\t \t \t \t remove_highlight(); 
 
\t \t \t }); 
 
\t \t }); 
 
\t }

\t .color_bar { 
 
\t \t width:24px; 
 
\t \t height:12px; 
 
\t \t margin-right:5px; 
 
\t \t vertical-align:middle; 
 
\t } 
 
\t #legend td { 
 
\t \t font-size:12; 
 
\t \t height:19px; 
 
\t \t font-family:"Arial"; 
 
\t }

\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <script src="https://www.gstatic.com/charts/loader.js"></script> 
 
\t <table id="legend"> 
 
\t \t <tr> 
 
\t \t \t <td><div class='color_bar' style="background-color:#3366cc"></div></td> 
 
\t \t \t <td>A</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><div class='color_bar' style="background-color:#dc3912"></div></td> 
 
\t \t \t <td>B</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><div class='color_bar' style="background-color:#ff9900"></div></td> 
 
\t \t \t <td>C</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td><div class='color_bar' style="background-color:#109618"></div></td> 
 
\t \t \t <td>D</td> 
 
\t \t </tr> 
 
\t </table> 
 
\t <div id="chart_id" ></div>