मैंने angular2 ng2-chart
का उपयोग करना शुरू कर दिया है। मैं नीचे दी गई छवि जो मैं angular2 NG2-चार्ट का उपयोग कर बनाया के बारे में कुछ प्रश्न पूछना चाहते हैं, लेकिन अभी भी अधिक अनुकूलन क्या करना चाहते हैं:कोणीय 2 एनजी 2-चार्ट अनुकूलन?
सवाल:
1) मैं जो डॉटेड-लाइन कैसे आकर्षित कर सकते हैं दो बिंदुओं पर जब उपरोक्त छवि में कोई मूल्य नहीं है तो नवंबर -7 में मूल्य 0 (शून्य) है?
2) मैं एक छाया प्रभाव, अस्पष्टता या एक से अधिक रंगों का संयोजन कैसे बना सकता हूं?
3) जब मैं किसी परिभाषित बिंदु पर होवर करता हूं और यदि मैं माउस होवर पर वाई-अक्ष ग्रिड रंग बदलना चाहता हूं तो मैं वाई-अक्ष का मान कैसे प्राप्त कर सकता हूं। एनजी 2-चार्ट होवर फ़ंक्शन का उपयोग करके इसे करने का सबसे अच्छा तरीका क्या है?
वर्तमान नमूना कोड और कॉन्फ़िग फ़ाइल:
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)'
}]
}
}
});
क्षमा करें प्रिय यह काम नहीं कर रहा है। मैंने एनजी 2-चार्ट्स के साथ उच्च स्तर की लाइब्रेरी के रूप में यह संभव नहीं पाया। यह केवल D3.js या nvD3.js के साथ संभव हो सकता है क्योंकि यह आपको घटकों पर नियंत्रण प्रदान करता है। धन्यवाद। –