Настройки Angular2 ng2-chart?

Question

Я начал использовать angular2 ng2-chart. У меня есть несколько вопросов относительно ниже изображения, которое я создал с помощью angular2 NG2-чарта, но все еще хочет сделать больше настроек:

Вопросов:

1) Как я могу нарисовать пунктирную линию между две точки, когда нет таких значений, как в приведенном выше изображении. Ноябрь-7 имеет значение 0 (ноль)?

2) Как я могу создать эффект тени, непрозрачность или комбинацию из нескольких цветов?

3) Как я могу получить значение оси y при наведении курсора на какую-либо определенную точку, а также если я хочу изменить цвет сетки оси y при наведении мыши. Каков наилучший способ сделать это с помощью функции наведения ng2-диаграммы?

Текущий пример кода и конфигурационный файл:

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

Я не мог найти лучший ответ на ваш первый вопрос. Однако вы можете определить несколько наборов данных без пересечения и использовать разные цвета (см. Пункт 2) для этого.

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 здесь:

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

За последний вопрос, касающийся получения значения оси х, смотреть на события, вошедшего на консоль на ограниченных событий.