我已经开始使用 angular2 ng2-chart
。我对使用 angular2 ng2-chart 创建的下图有几个问题,但仍想进行更多自定义:
问题:
1)当没有像上图 Nov-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)'
}]
}
}
});