Angular 2 Diagramm - Änderungspunkt Radius

Question

Ich verwende ng2-Diagramme (https://github.com/valor-software/ng2-charts), um ein Liniendiagramm für meine Angular 2-Anwendung zu erstellen. Das Diagramm funktioniert einwandfrei. Wenn Sie den Mauszeiger über einen Punkt halten, ändert sich der Punkt automatisch in Weiß, um zu verdeutlichen, dass er mit der Maus verschoben wird. Ich möchte dieses Verhalten aber manuell durch Code nachahmen.

Wenn Sie auf einen Punkt klicken, habe ich Klickereignisse, die ein Objekt zurückgeben, das das Diagramm enthält (siehe Bild). Von diesem Objekt habe ich einige Werte gefunden, die den Radius des Punktes zu steuern scheinen: _model.hitRadius, _model.radius, _view.hitRadius und _view.radius (siehe Bild).

Ich habe versucht, diese Werte im Code zu ändern, aber nichts passiert mit dem Diagrammpunkt.

e.active[0]._model.hitRadius = 5; 
    e.active[0]._model.radius = 10; 
    e.active[0]._view.hitRadius = 5; 
    e.active[0]._view.radius = 10; 

Ich habe auch versucht, das Hinzufügen ‚e.update()‘ nach den Wert zu ändern, aber ich habe einen Fehler das Update zu sagen() ist keine Funktion.

Answer 1

Sie können einige dieser Werte in Optionen festlegen und sie dann an die canvas-Direktive übergeben. Setzen Sie den [options]-Tag im HTML:

<div style="display: block;"> 
    <canvas baseChart width="2" height="1" 
      [datasets]="chartData" 
      [labels]="chartLabels" 
      [options]="chartOptions" 
      [colors]="chartColors" 
      [legend]=true 
      chartType=line></canvas> 
</div> 

dann die verschiedenen Optionen erstellen Objekt im Typoskript:

private chartOptions = 
{ 
    responsive: true, 
    elements: 
    { 
     point: 
     { 
      radius: 1, 
      hitRadius: 5, 
      hoverRadius: 10, 
      hoverBorderWidth: 2 
     } 
    } 
}; 

More on ChartJS point configuration