मैं पहली बार HighCharts का उपयोग कर रहा हूं और इस समस्या से निपटने में मेरी मदद करने के लिए स्रोत खोजना मुश्किल साबित हो रहा है।

मैं श्रृंखला की विभिन्न संख्याओं के साथ कई चार्ट प्रदर्शित करने का प्रयास कर रहा हूं। एकाधिक विकल्प टेम्पलेट सेट करने के बजाय मैं केवल एक का उपयोग करना चाहता हूं और हर बार विकल्प ऑब्जेक्ट को अनुकूलित करने के लिए फ़ंक्शन का उपयोग करना चाहता हूं। यहां मैंने एपीआई से प्राप्त चार्ट की तरह दिखने के लिए नकली डेटा प्रदान किया है। आवेदन में मैं इसे HTML से खिलाने की योजना बना रहा हूं।

हाईचार्ट्स की मेरी समझ की कमी के कारण मैं विभिन्न समस्याओं में भागता रहता हूं, अभी मैं केवल एक समस्या को ठीक करने के लिए मंडलियों में घूम रहा हूं, केवल पिछली समस्या को फिर से पॉप-अप करने के लिए मैं उम्मीद कर रहा था कि कोई मुझे सही दिशा में इंगित कर सकता है। यह मेरी कक्षा है:

export class CompletenessTabComponent implements OnInit, AfterViewInit {
  @ViewChild('chartTarget') chartTarget: ElementRef;

  chart: Highcharts.ChartObject;

  dataObj = {"id":0,
    "tableName":"d1 vs d2",
    "data":{"d1Count":[50,45,55,60,70],
      "d2Count":[40,32,55,58,33],
      "Errors":[2,3,4,1,0]},
    "dates":[20180927,20180928,20181001,20181002,20181003]
  };

  constructor() { }

  setHighChartOptions(data, seriesNames, chartTitle ): any {
    count = 1;
    highChartOptions.title.text = chartTitle;
    highChartOptions.xAxis.data = data.dates;
    this.chart.series[0].setData(this.dataObj.data[0]);
    Object.keys(data.data).forEach((key) =>
      this.chart.addSeries({
        name: seriesNames[count],
        data: data.data[key],
        type: 'line'
      }) count ++
    );
    return highChartOptions;
  }
  getHighChartOptions(){
    return highChartOptions;
  }
  ngOnInit() {
    this.chart = chart(this.chartTarget.nativeElement, this.setHighChartOptions(this.dataObj, ['d1', 'd2', 'error'], this.dataObj.tableName));
    Object.keys(this.dataObj.data).forEach(key =>
    console.log(key, this.dataObj.data[key]))
  }
  ngAfterViewInit() {
  }

}

const highChartOptions = {
  colors:
    ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],

  credits: {
    enabled: false
  },
  chart: {
    backgroundColor: null,
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    itemStyle: {
      fontSize: '10px',
      fontWeight: 'normal'
    }
  },
  tooltip: {
    valuePrefix: '$'
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'date',
    data: [],
    title: 'date'
  },
  yAxis: {
    title: {
      align: 'middle',
      rotation: 0,
      text: ''
    }
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      },
      shadow: false
    }
  },
  series: [{
    type: 'line',
    name: '',
    data: [null]
  }]
};

मुझे प्राप्त होने वाली कुछ त्रुटियां हैं:

in setHighChartOptions() : अपरिभाषित (पर, this.chart.series [0]) की संपत्ति 'श्रृंखला' नहीं पढ़ सकता है, और अपरिभाषित की 'कुंजी' नहीं पढ़ सकता (फॉरएच लूप की शुरुआत में)।

मेरा मानना ​​​​है कि बड़ा मुद्दा यह है कि चार्ट ऑब्जेक्ट अपरिभाषित है जिसका कोई मतलब नहीं है क्योंकि मैंने इसे कक्षा के शीर्ष पर तुरंत चालू कर दिया है और फिर मैंने चार्ट विकल्प सेट किए हैं।

मुझे आशा है कि आप मेरी त्रुटियों का पता लगाने और मेरी सहायता करने में सक्षम होंगे। शुक्रिया।

4
Haq.H 5 अक्टूबर 2018, 18:35

2 जवाब

सबसे बढ़िया उत्तर

सबसे अधिक संभावना है, ऐसा इसलिए है क्योंकि आप उस श्रृंखला को संदर्भित करने का प्रयास कर रहे हैं जो पहले से परिभाषित नहीं है। दरअसल, अगर आप पहली बार setHighchartsOptions को कॉल कर रहे हैं, तो आपका चार्ट अभी तक परिभाषित नहीं है।

इसे काम करने के लिए, कृपया पहले चार्ट में प्रवेश करने का प्रयास करें (बिना किसी डेटा के खाली चार्ट भी हो सकता है), और फिर Chart ऑब्जेक्ट पर अन्य विधियों को कॉल करें, जैसे addSeries। ऐसा कुछ, लेकिन मैंने आपका पूरा ऐप नहीं देखा, इसलिए पूरी तरह से समायोजित समाधान लिखना मुश्किल है।

ngOnInit() {
    this.chart = chart(this.chartTarget.nativeElement, {});
    this.chart.update(this.setHighChartOptions(this.dataObj, ['d1', 'd2', 'error'], this.dataObj.tableName))
    Object.keys(this.dataObj.data).forEach(key =>
    console.log(key, this.dataObj.data[key]))
  }
1
daniel_s 8 अक्टूबर 2018, 15:32

सबसे पहले, आपको अपने एंगुलर प्रोजेक्ट में सभी जेएस पैकेज को सही ढंग से आयात करने के लिए सावधान रहना चाहिए:

import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

साथ ही, आपको यह जांचना होगा कि क्या आपका पैकेज "एनपीएम" के साथ सही ढंग से स्थापित है?

आखिरकार, मेरे दृष्टिकोण के अनुसार, यह उदाहरण आपको अपनी परियोजना में "हाईचार्ट्स" पैकेज का उपयोग करने के तरीके को बेहतर ढंग से समझने में मदद कर सकता है, अन्य कॉन्फ़िगरेशन "हाईचार्ट्स" के संस्करण पर निर्भर करते हैं जिसका आप उपयोग कर रहे हैं।

import { Component, ElementRef, ViewChild } from '@angular/core';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Highcharts Sample';

  @ViewChild('chartTarget') chartTarget: ElementRef;

  chart: Highcharts.ChartObject;

  ngAfterViewInit() {
    const options: Highcharts.Options = {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Sample Title'
      },
      xAxis: {
        categories: ['Top Test', 'Test 2', 'Test3']
      },
      yAxis: {
        title: {
          text: 'Fox Rex'
        }
      },
      series: [{
        name: 'Tomi',
        data: [1, 0, 4]
      }, {
        name: 'Alex',
        data: [5, 7, 3]
      }]
    };

    this.chart = chart(this.chartTarget.nativeElement, options);
  }

  addSeries(){
    this.chart.addSeries({
      name:'Test',
      data:[2,3,7]
    })    
  }
}

और नमूना का HTML टेम्पलेट:

<div #chartTarget>
  chart target sample
</div>

साथ ही, आपको हाईचार्ट्स को डेटा देना होगा क्योंकि उसके लिए प्रारूप मानक है, हाईचार्ट्स वेबसाइट में उदाहरणों में JSON नमूना डेटा प्रारूप की जांच करें।

1
Behrouz Pooladrag 5 अक्टूबर 2018, 18:23