Google Chart: Warum bin ich zwei ausgewählte Veranstaltungen bekommen, wenn ich Animation eingeschaltet

Question

ich ein ausgewähltes Ereignis zu Diagrammen anhängen - ein Säulendiagramm und ein Kreisdiagramm

Wenn ich auf Animation drehen, bekomme ich zwei Ereignisse für eine einzelne Spalte auswählen Wählen Sie eine Aktion aus dem Säulendiagramm (aber nur eine korrekt aus dem Tortendiagramm, das nicht animiert wird).

Für das Säulendiagramm gibt das erste Ereignis die richtigen Auswahldaten [{column:1, row:1}] zurück, aber das zweite Ereignis gibt ein leeres Array zurück.

Mit Animation ausgeschaltet (auskommentiert) bekomme ich die richtige Antwort, nämlich nur ein Ereignis, wenn ein Benutzer eine Spalte auswählt.

Hat jemand das gesehen? Was mache ich? Ich habe keinen Wert gefunden, der mich sogar unterscheiden lässt, ob das Ereignis in Anwesenheit von Animation auftritt oder auf irgendeine andere logische Weise, um das bösartige zweite Ereignis zumindest herauszufiltern. Offensichtlich möchte ich das falsche zweite Ereignis unterdrücken, wenn die Animation eingeschaltet ist.

Hier ist die Animation spec:

let options = { 
    animation:{ 
     startup: true, 
     duration: 500, 
     easing: 'out', 
    }, 

Answer 1

die 'select' Veranstaltung auf einem Column scheint hier mit Animation adaequat werden,
folgenden Arbeits Schnipsel sehen ...

gibt es mehr Sie teilen können ?
erstellen Sie die Diagramme direkt oder mithilfe der ChartWrapper-Klasse?
Welche Pakete verwendest du, 'corechart'?

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('timeofday', 'Time of Day'); 
 
    data.addColumn('number', 'Motivation Level'); 
 
    data.addColumn('number', 'Energy Level'); 
 
    data.addRows([ 
 
     [{v: [8, 0, 0], f: '8 am'}, 1, .25], 
 
     [{v: [9, 0, 0], f: '9 am'}, 2, .5], 
 
     [{v: [10, 0, 0], f:'10 am'}, 3, 1], 
 
     [{v: [11, 0, 0], f: '11 am'}, 4, 2.25], 
 
     [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25], 
 
     [{v: [13, 0, 0], f: '1 pm'}, 6, 3], 
 
     [{v: [14, 0, 0], f: '2 pm'}, 7, 4], 
 
     [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25], 
 
     [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5], 
 
     [{v: [17, 0, 0], f: '5 pm'}, 10, 10], 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([{sourceColumn:0, type: 'string', calc: 'stringify'}, 1]); 
 

 
    var options = { 
 
     animation:{ 
 
     startup: true, 
 
     duration: 500, 
 
     easing: 'out', 
 
     }, 
 
     hAxis: { 
 
     title: 'Time of Day', 
 
     format: 'h:mm a', 
 
     viewWindow: { 
 
      min: [7, 30, 0], 
 
      max: [17, 30, 0] 
 
     } 
 
     }, 
 
     isStacked: true, 
 
     title: 'Motivation and Energy Level Throughout the Day', 
 
     vAxis: { 
 
     title: 'Rating (scale of 1-10)' 
 
     } 
 
    }; 
 

 
    var chartCol = new google.visualization.ColumnChart(document.getElementById('column_div')); 
 
    var chartPie = new google.visualization.PieChart(document.getElementById('pie_div')); 
 

 
    google.visualization.events.addListener(chartCol, 'select', function() { 
 
    \t showSelection(chartCol); 
 
    }); 
 
    google.visualization.events.addListener(chartPie, 'select', function() { 
 
    \t showSelection(chartPie); 
 
    }); 
 
    
 
    function showSelection(sender) { 
 
     document.getElementById('msg_div').innerHTML += (new Date()).getTime() + ' -- ' + JSON.stringify(sender.getSelection()) + '<br/>';  
 
    } 
 

 
    chartCol.draw(data, options); 
 
    chartPie.draw(view, { 
 
    \t legend: 'none', 
 
     theme: 'maximized' 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

div { 
 
    padding: 6px 6px 6px 6px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="column_div"></div> 
 
<div id="pie_div"></div> 
 
<div id="msg_div"></div>