2016-11-19 28 views
5

मैंने angular2 ng2-chart का उपयोग करना शुरू कर दिया है। मैं नीचे दी गई छवि जो मैं angular2 NG2-चार्ट का उपयोग कर बनाया के बारे में कुछ प्रश्न पूछना चाहते हैं, लेकिन अभी भी अधिक अनुकूलन क्या करना चाहते हैं:कोणीय 2 एनजी 2-चार्ट अनुकूलन?

Sample Chart

सवाल:

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)' 
     }] 
    } 
    } 
}); 

उत्तर

0

मैं नहीं कर सके सबसे अच्छा जवाब नहीं मिला आपके पहले प्रश्न के लिए। हालांकि आप बिना किसी अंतर के एकाधिक डेटासेट को परिभाषित कर सकते हैं और उस के लिए अलग-अलग रंगों का उपयोग कर सकते हैं (बिंदु 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- अक्ष के मान रही के बारे में आखिरी सवाल के लिए, घटना है जो घिरे घटनाओं पर सांत्वना देने लॉग होता है को देखो।

+0

क्षमा करें प्रिय यह काम नहीं कर रहा है। मैंने एनजी 2-चार्ट्स के साथ उच्च स्तर की लाइब्रेरी के रूप में यह संभव नहीं पाया। यह केवल D3.js या nvD3.js के साथ संभव हो सकता है क्योंकि यह आपको घटकों पर नियंत्रण प्रदान करता है। धन्यवाद। –

संबंधित मुद्दे