Angular2 ng2-chartのカスタマイズはありますか？

Question

私はangular2 ng2-chartを使い始めました。私はangular2 NG2-チャートを使用して作成し、以下の画像に関するいくつかの質問を持っているが、まだ多くのカスタマイズを行いたい：

質問：私は間の点線を描くことができますどのように

1）上の画像のような値がないときの2つの点Nov-7は値0（ゼロ）ですか？

2）シャドウ効果、不透明度、または複数の色の組み合わせを作成するにはどうすればよいですか？

3）定義されたポイントのどれかにカーソルを置くと、マウスのホバーでy軸のグリッドの色を変更したい場合、y軸の値を取得するにはどうすればよいですか？ ng2-chart hover関数を使用してそれを行う最良の方法は何ですか？

現在のサンプルコードや設定ファイル：

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

私はcouldn最善の答えを見つけられないあなたの最初の質問に。しかし、交差点のない複数のデータセットを定義し、異なる色（点2参照）を使用することができます。 1秒間

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

すでにあなたのコードでそれをやっているようあなたは、色を定義する場合：

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の最後の数は不透明です。異なる色を持つために、複数のデータセットを定義するオプションがあります。それ以外の場合は、色がランダム化され、混合されません。ここplunker：x軸の値の取得に関する最後の質問については

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

、有界イベントにコンソールに記録されるイベントを見てください。