Angular2 ng2-chart Anpassungen?

Question

Ich habe begonnen, angular2 ng2-chart zu verwenden. Ich habe einige Fragen auf das Bild unten in Bezug auf die ich angular2 NG2-Diagramm erstellt, will aber noch mehr Anpassung tun:

Fragen:

1) Wie kann ich eine gepunktete Linie ziehen zwischen zwei Punkte, wenn es keine Werte wie in obigem Bild gibt Nov-7 hat den Wert 0 (Null)?

2) Wie kann ich einen Schatteneffekt, eine Opazität oder eine Kombination von mehr als einer Farbe erzeugen?

3) Wie kann ich den Wert der y-Achse erhalten, wenn ich auf einen der definierten Punkte schwebe und auch wenn ich die y-Achsen-Gitterfarbe beim Maus-Hover ändern möchte. Was ist der beste Weg, um es mit der Schwebefunktion ng2-chart zu machen?

Aktuelle Beispielcode und Konfigurationsdatei:

index.html

<div class="container"> 
    <div class="row"> 
    <div class="overview-page"> 
     <div class="overview-page-title"> 
     <h2>Overview</h2> 
     </div> 
     <div class="chart-view"> 
     <canvas baseChart 
      class="chart" 
      [datasets]="charts.datasets" 
      [labels]="charts.labels" 
      [colors]="charts.chartColors" 
      [options]="charts.options" 
      [legend]="false" 
      [chartType]="charts.type" 
      (chartHover)="chartHovered($event)"> 
     </canvas> 
     </div> 
    </div> 
    </div> 
</div> 

index.component.ts

import {Component, Output, EventEmitter, OnInit} from '@angular/core'; 
import {Router} from '@angular/router'; 
import {Config} from '../../../config/config'; 

@Component({ 
    templateUrl: 'index.html', 
    styleUrls: ['../../../../common/stylesheets/pages/index.scss'] 
}) 

export class IndexComponent implements OnInit { 

    protected charts: any; 

    ngOnInit() { 
    this.charts = (<any>Config.get('test')).charts; 
    console.log(this.charts); 
    } 

    chartHovered(e:any):void { 
    console.log(e); 
    } 
} 

Config.ts:

import * as Immutable from 'immutable'; 
export const Config = Immutable.Map({ 
    test: { 
    charts: { 
     datasets: [{ 
     data: [40, 48.2, 0, 52.6, 51.1, 57.6, 74.8] 
     }], 
     labels: ['Nov 5', 'Nov 6', 'Nov 7', 'Nov 8', 'Nov 9', 'Nov 10', 'Nov 11'], 
     type: 'line', 
     options: { 
     scales: { 
      xAxes: [{ 
      gridLines: { 
       color: 'rgba(171,171,171,1)', 
       lineWidth: 1 
      } 
      }], 
      yAxes: [{ 
      ticks: { 
       beginAtZero: true, 
       max: 100, 
       min: 0, 
       stepSize: 25 
      }, 
      gridLines: { 
       color: 'rgba(171,171,171,1)', 
       lineWidth: 0.5 
      } 
      }] 
     }, 
     responsive: true 
     }, 
     chartColors: [{ 
     backgroundColor: 'rgba(25,10,24,0.2)', 
     borderColor: 'rgba(225,10,24,0.2)', 
     pointBackgroundColor: 'rgba(225,10,24,0.2)', 
     pointBorderColor: '#fff', 
     pointHoverBackgroundColor: '#fff', 
     pointHoverBorderColor: 'rgba(225,10,24,0.2)' 
     }] 
    } 
    } 
}); 

Answer 1

I couldn Ich finde nicht die beste Antwort zu deiner ersten Frage. Sie können jedoch mehrere Datensätze ohne Schnittpunkt definieren und unterschiedliche Farben (siehe Punkt 2) für diesen Datensatz verwenden.

http://valor-software.com/ng2-charts/

Für die zweite, wenn Sie definieren Farben, wie Sie es bereits in Ihrem Code zu tun sind:

chartColors: [{ 
    backgroundColor: 'rgba(25,10,24,0.2)', 
    borderColor: 'rgba(225,10,24,0.2)', 
    pointBackgroundColor: 'rgba(225,10,24,0.2)', 
    pointBorderColor: '#fff', 
    pointHoverBackgroundColor: '#fff', 
    pointHoverBorderColor: 'rgba(225,10,24,0.2)' 
    } 

Die letzte Zahl in rgba die Opazität ist. Wenn Sie unterschiedliche Farben haben, können Sie mehrere Datensätze definieren, andernfalls werden die Farben zufällig ausgewählt und Sie erhalten keine gemischten Farben. Ein Plunker hier:

http://plnkr.co/edit/9PckMZiDYZjRz1PA0Suq

Für die letzte Frage in Bezug auf den Wert der x-Achse erhalten, Blick auf die Veranstaltung, die auf begrenzte Ereignisse zu trösten angemeldet ist.