2016-05-10 9 views
0
Arbeits

http://jsfiddle.net/sgrg93/7z6r4gkk/Highcharts: TreeMap Wählen Region nicht

plotOptions: { 
    treemap: { 
    allowPointSelect: true, 
    states: { 
     hover: { 
     borderColor: "red" 
     } 
    } 
    } 
}, 

In dem obigen Code, habe ich schweben Zustand verwendet, die mich rot gefärbte Grenzen zu sehen, ermöglicht es, wenn ich auf sie schweben. Auch wenn ich mehrere Baumabschnitte auswähle, werden die roten Ränder beibehalten.

Nun, was ich verlangen, ist, dass nur, wenn ich Baumschnitte wählen , sind rot gefärbt Grenzen gesehen, und auf schweben, wird keine Änderung der Grenzen beobachtet.

So etwas (was nicht funktioniert)

plotOptions: { 
    treemap: { 
    allowPointSelect: true, 
    states: { 
     select: {  //hover changed to select 
     borderColor: "red" //change color only on select and not on hover 
     } 
    } 
    } 
}, 

Gibt es eine Möglichkeit, dies zu erreichen?

Antwort

1

Um nur Ihre treemap Abschnitte haben rote Grenzen haben, wenn sie ausgewählt, und nicht auf den Schwebezustand, versuchen Sie Folgendes:

plotOptions: { 
    treemap: { 
     allowPointSelect: true, 
     point: { 
      events: { 
       select: function() { 
        this.update({ 
         borderColor: 'red', borderWidth: 4 
        });     
       } 
      } 
     } 
    } 
} 

Was Sie hier tun, ist ein select Event für Ihre Punkteinstellung (die (in der Baumstruktur, die die Benutzer auswählen sollen) und fordert sie auf, die Rahmenfarbe und -breite zu aktualisieren (ich habe die Breite hinzugefügt, um die Änderung besser zu veranschaulichen).

Hier ist eine modifizierte Geige Sie überprüfen können: http://jsfiddle.net/brightmatrix/7z6r4gkk/5/

Ich hoffe, dass dies für Sie hilfreich ist!

+2

... und auf ['unselect' Ereignis] (http://api.highcharts.com/highcharts#plotOptions.treemap.point.events.unselect) können Sie die Änderungen rückgängig machen - http://jsfiddle.net/7z6r4gkk/6 / –