Angular2 ng2 grafik özelleştirmeleri?

Question

Angular2 ng2-chart'u kullanmaya başladım. Ben angular2 NG2-grafiği kullanılarak oluşturulan aşağıdaki resme ilişkin birkaç soru var ama hala daha özelleştirme yapmak istiyorum:

Sorular: Ben arasına noktalı çizgi çizin nasıl

1) Yukarıdaki görüntüde herhangi bir değer olmadığında iki nokta Nov-7'nin değeri 0 (sıfır)?

2) Gölge efekti, opaklık veya birden fazla rengin birleşimini nasıl yapabilirim?

3) Tanımlanan noktaya geldiğimde y ekseninin değerini nasıl alabilirim ve ayrıca fare imlecindeki y ekseni ızgara rengini değiştirmek istersem. Ng2-chart hover işlevini kullanarak bunu yapmanın en iyi yolu nedir?

Güncel örnek kod ve yapılandırma dosyası:

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

ben edemedim en iyi cevabı bulamadım ilk sorunuza Ancak, kesişimi olmayan birden fazla veri kümesini tanımlayabilir ve farklı renkler kullanabilirsiniz (bkz. 2. nokta).

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

rgba son numara donukluk şudur: kodunuzda zaten bunu yapıyor olarak ikinci Birincisi

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

Eğer renkleri tanımlarken. Farklı renklere sahip olmanız için seçenek birden fazla veri kümesini tanımlamaktır, aksi halde renkleri rastgele karıştırır ve karışık olanlara sahip olmazsınız. Burada bir plunker: x ekseni değerini alma konusunda son soru için

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

, sınırlı olaylara konsola kaydedilir olayı bak.