Dostosowania Angular2 ng2-chart?

Question

Zacząłem używać angular2 ng2-chart. Mam kilka pytań dotyczących poniższego obrazu, który stworzyłem za pomocą angular2 NG2-chart, ale nadal chcą zrobić więcej Dostosowanie:

pytania:

1) W jaki sposób można narysować przerywaną linię pomiędzy dwa punkty, gdy nie ma wartości jak na powyższym obrazku Nov-7 ma wartość 0 (zero)?

2) Jak mogę uzyskać efekt cienia, krycie lub połączenie więcej niż jednego koloru?

3) W jaki sposób mogę uzyskać wartość osi Y po najechaniu kursorem na dowolny zdefiniowany punkt, a także jeśli chcę zmienić kolor siatki osi Y po najechaniu kursorem myszy. Jaki jest najlepszy sposób, aby to zrobić za pomocą funkcji kursowania ng2-chart?

Aktualny kod przykładowy i plik konfiguracyjny:

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

nie mogłam znaleźć najlepszą odpowiedź na twoje pierwsze pytanie. Można jednak zdefiniować wiele zestawów danych bez przecięć i używać różnych kolorów (patrz punkt 2) dla tego.

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

Na drugim podczas definiowania kolorów, jak już robisz go w kodzie:

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)' 
    } 

Ostatni numer w rgba jest krycie. Aby mieć różne kolory, można zdefiniować wiele zestawów danych, w przeciwnym wypadku losowo wybierane są kolory i nie będzie można uzyskać mieszanych kolorów. Plunker tutaj:

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

Przez ostatnie pytanie dotyczące uzyskania wartości osi x, spojrzeć na wydarzenia, które jest zalogowany do konsoli na ograniczonych wydarzeń.