Angular2 ng2-chart 自定義？

Question

我已經開始使用 angular2 ng2-chart 。 我對下面使用 angular2 ng2-chart 創建的圖像有幾個疑問，但仍想進行更多自定義：

問題：

1) 當沒有像上圖 11 月 7 日這樣的值為 0（零）的值時，如何在兩點之間繪制虛線？

2) 如何制作陰影效果、不透明度或多種顏色的組合？

3）當我將鼠標懸停在任何定義的點上時，以及如果我想在鼠標懸停時更改 y 軸網格顏色時，如何獲得 y 軸的值。 使用 ng2-chart 懸停功能的最佳方法是什么？

當前示例代碼和配置文件：

索引.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);
  }
}

配置文件：

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

對於關於獲取 x 軸值的最后一個問題，請查看記錄到控制台的有界事件的事件。