Данные JSON с angular2-highcharts

Я хочу создать диаграмму на основе данных JSON. Я использую angular2-highcharts, мой компонент ChartsMain выглядит так:

@Component({
moduleId: module.id,
selector: 'charts',
templateUrl: 'charts.html',
directives: [CHART_DIRECTIVES,]
providers: [DataService]
})
export class ChartsMain {

result: Data[];

constructor(DataService:DataService) {
    DataService.getData().subscribe(res => this.result = res);
        this.options = {
            chart: {
                type: "candlestick"
            },
            title: {
                text: "JSON data"
            },
            xAxis: {
                type: "category",
                allowDecimals: false,
                title: {
                    text: ""
                }
            },
            yAxis: {
                title: {
                    text: "Number"
                }
            },
            series: [{
                name: "Hour",
                data: this.result
            }]
        };
}
options: Object;

И мой DataService выглядит:

@Injectable()
export class DataService {

http: Http;
constructor(http: Http) {
    this.http = http;
}


getData(): Observable<Array<Data>> {
    return this.http.get('http://JSON-DATA')
        .map(this.extractData)
        .catch(this.handleError)
}

private extractData(res: Response) {
    let body = res.json();
    return body || { };
}
private handleError(error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
}
}

Моя диаграмма

В чем проблема, почему диаграмма пуста? Как заполнить диаграмму данными JSON. Данные JSON должны быть в каком-то определенном формате?


person Marko    schedule 16.08.2016    source источник
comment
Вы можете поделиться своими данными JSON?   -  person Sanket    schedule 16.08.2016
comment
да, мои данные JSON: ‹code› [ {Id: 1, Name: Name1, ProductId: 2, ProductName: ProductName1, StartMonth: 2016-01-01T00:00:00, EndMonth: 2016-01-01T00:00: 00, Number1: 1, Number2: 2, ProductDetail: [{Id: 101, OrderId: 1001, ProductionMonth: 2016-01-01T00:00:00, OrdersCount: 10, StorageCount: 1, ProductAll: null } ] }, ]   -  person Marko    schedule 16.08.2016


Ответы (2)


Свечной график обычно используется для представления цены открытия, максимума, минимума и закрытия за определенный период времени.

Пример ожидаемого формата JSON выглядит следующим образом:

[
[1250553600000,23.09,23.46,23.06,23.43],
[1250640000000,23.25,23.61,23.21,23.51],
[1250726400000,23.57,23.82,23.52,23.76],
[1250812800000,23.95,24.20,23.83,24.17],
[1251072000000,24.30,24.39,24.04,24.15],
[1251158400000,24.21,24.42,24.16,24.20],
[1251244800000,24.13,24.22,23.82,23.92],
[1251331200000,24.11,24.22,23.55,24.21],
[1251417600000,24.61,24.64,24.08,24.29],
[1251676800000,24.02,24.12,23.79,24.03],
]

Вот образец компонента со свечным графиком highchart-

import { Component } from '@angular/core';
import {JSONP_PROVIDERS, Jsonp} from '@angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';


@Component({
    selector: 'high-chart',
    directives: [CHART_DIRECTIVES],
    providers: [JSONP_PROVIDERS],
    template: `
    <h2> This is HighChart CandleStick component </h2>

        <chart type="StockChart" [options]="options3"></chart>
    `
})

export class HighChartsComponent {

    options3: Object;

    constructor(jsonp : Jsonp) {

        jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
            this.options3 = {
                title : { text : 'CandleSticks' },
                rangeSelector : {
                    selected : 1
                },
                series : [{
                    type : 'candlestick',
                    name : 'CandleSticks',
                    data : res.json(),
                    dataGrouping : {
                    units : [
                        [
                            'week', // unit name
                            [1] // allowed multiples
                        ], [
                            'month',
                            [1, 2, 3, 4, 6]
                        ]
                    ]
                },
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
            };

        });
}

ИЗМЕНИТЬ:

В вашем случае вы не устанавливаете параметры диаграммы внутри подписки. Вы должны установить так-

        this._http.get('http://knowstack.com/webtech/charts_demo/data.json')
                .map(this.extractData)
                .subscribe((response) => {
                    this.options = {
                                    title : { text : 'knowstack' },
                                    series : [{
                                        name : 'knowstack',
                                        data : response.json()
                                    }]
                                };
                },
                (error) => {  
                    this.errorMessage = <any>error
                });

Обратите внимание - данные из knowstack будут работать только с простыми графиками (не свечными)


РЕДАКТИРОВАНИЕ 2: столбчатая диаграмма

См. приведенную ниже конфигурацию. Вот как вы можете использовать столбчатую диаграмму.

this.options1 = {
            title : { text : 'simple column chart' },
            series: [{
                type : 'column',
                data:  [["Maths",15],["Physics",16],["Biology",18],["Chemistry",19]]
            }]
        };

EDIT 3: пример пары ключ-значение json

import { Component }        from '@angular/core';
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 

@Component({
    selector: 'my-app',
    directives: [CHART_DIRECTIVES],
    styles: [`
      chart {
        display: block;
      }
    `]
    template: `<chart [options]="options"></chart>`
})
class AppComponent {
    constructor() {
        var data = [{"key":"Math","value":98},{"key":"Physics","value":78},{"key":"Biology","value":70},{"key":"Chemistry","value":90},{"key":"Literature","value":79}];

        this.options = {
            title : { text : 'simple chart' },
            xAxis: {
                type: 'category'
            },
            series: [{
                data: data.map(function (point) {
                    return [point.key, point.value]; 
                })
            }]
        };
    }
    options: Object;
}
person Sanket    schedule 16.08.2016
comment
Так что я не могу использовать другой формат json? Когда я использую образец компонента и даю URL-адрес для своего json, я получаю следующее: ИСКЛЮЧЕНИЕ: Ответ со статусом: 200 Ok для URL-адреса: - person Marko; 16.08.2016
comment
Я не думаю, что свечи придерживаются другого формата json. Вы можете поделиться своими данными JSON? Я могу попробовать со своей стороны. Что касается исключения. Верен ли ваш URL-адрес (http://JSON-DATA)? - person Sanket; 16.08.2016
comment
Я пробовал также столбец диаграммы другого типа, смешивал не только свечи, но и все те же исключения. Я также попробовал этот пример load-highcharts-data в моем приложении angular 2, я беру данные JSON и создаю файл data.json из knowstack.com/webtech/charts_demo/data.json я получаю снова ИСКЛЮЧЕНИЕ: ответ со статусом: 200 OK для URL: а также когда я использую адрес knowstack в jsonp.request - person Marko; 16.08.2016
comment
@Marko проверь мой ответ на РЕДАКТИРОВАТЬ. - person Sanket; 16.08.2016
comment
где следует использовать ваш код? (в компоненте или сервисе) Я новичок в angular2, typescript и javascript. Я просто хочу создать диаграмму с моим собственным файлом data.json, который находится на сервере или в папке с другими файлами angular2. - person Marko; 17.08.2016
comment
Это только для справки. Просто проверьте, как я устанавливаю параметры графика внутри подписки. Я думаю, что вам не хватает этой части. - person Sanket; 17.08.2016
comment
Я получаю эту ошибку: XMLHttpRequest не может загрузить knowstack.com/webtech/charts_demo/data.json< /а>. В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Таким образом, доступ к источнику 'localhost:3000' запрещен. Ошибка сервера - person Marko; 17.08.2016
comment
это потому, что служба knowstack не поддерживает CORS на их стороне. - person Sanket; 17.08.2016
comment
Можете ли вы помочь мне с анализом данных JSON в angular2-highcharts? - person Marko; 23.08.2016
comment
Как я написал во втором ответе данные json, например: .json исходный код моего компонента находится в предыдущем ответе. в этом вопросе - person Marko; 23.08.2016
comment
Я хотел бы создать такую ​​же диаграмму, как в этом примере ( .html ), но в angular2 с angular2-highcharts. И я не знаю, как именно анализировать данные из json. - person Marko; 25.08.2016
comment
обратитесь к моему ответу EDIT 2. Вот как вы можете установить параметры для гистограммы. Я не уверен в вашем формате JSON. - person Sanket; 25.08.2016
comment
спасибо, я пробовал, но я хочу использовать файл json, например knowstack.com/webtech/charts_demo/ data.json, поэтому мне нужна функция, которая анализирует этот файл json, как здесь knowstack. com/webtech/charts_demo/highchartsdemo4.html - person Marko; 25.08.2016
comment
@Marko проверь мой ответ EDIT 3 - person Sanket; 31.08.2016
comment
Спасибо за работу. Но у меня следующий вопрос. Что, если у меня есть данные json: var data = [{key:Math,value:98,Mark:[Peter:A,Michael:C]},{key:Physics,value:78,Mark:[Peter:B, Майкл:А]}]; и я хочу использовать также данные для Питера, Майкла Маркса. Как я могу это сделать? - person Marko; 05.09.2016
comment
Если это сработает, отметьте как ответ и поднимите новый пост для нового вопроса. - person Sanket; 05.09.2016

Хорошо, это работа. Я использую сервис, который в моем первом сообщении я просто изменил компонент: constructor(http: Http, jsonp : Jsonp, DataService:DataService) { DataService.getData().subscribe(res => this.result = res); http.request('').subscribe(res => { this.options = { chart: { type: 'column' }, plotOptions: { column: { zones: [{ value: 12, },{ color: 'red' }] } }, series: [{ data: this.result }] }; }); } options: Object;

в этом случае данные json: [{"key":"Math","value":98},{"key":"Physics","value":78},{"key":"Biology","value":70},{"key":"Chemistry","value":90},{"key":"Literature","value":79}]

Как я могу разделить эти данные, как здесь http://www.knowstack.com/webtech/charts_demo/highchartsdemo4.html

person Marko    schedule 18.08.2016