Я хочу создать гистограмму диаграммы. js в Angular 9. Предполагается, что пользователь вводит строку в строку поиска, которая находит соответствующую запись в файле. json и возвращает его свойства в гистограмму. Например, вы можете ввести «болгарский перец», и на нем будет показан график, на котором один столбик называется «сладким» и его максимум 3, а затем столбец «кислый», который равен 1 максимуму. Компонент поиска работает, я могу ввести имя, и он возвращает значения в виде текста. Тем не менее, я не могу заставить его вернуть правильный график.
Извините, если это базовый c вопрос для вас, ребята, я просто любитель, который учится кодировать. Я искал проблему повсюду, но не смог найти эту проблему или какой-либо способ ее решить.
Это home-page.component.ts:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data.service';
import { Post } from '../../post';
import { Chart } from 'chart.js';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
post: Post[]
constructor(
public dataService: DataService
) { }
ngOnInit() {
this.dataService.getPosts().subscribe(posts => {
this.post = posts
this.dataService.postsData = posts
});
}
onSelectedFilter(e) {
this.getFilteredExpenseList();
let postname = this.post.name;
let postsour = this.post.sour;
let postsweet = this.post.sweet;
this.chart = new Chart('canvas', {
type: 'bar',
data: {
labels: postname,
datasets: [
{
data: postsour,
borderColor: "#3cba9f",
fill: false
},
{
data: postsweet,
borderColor: "#ffcc00",
fill: false
},
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}],
}
}
});
}
getFilteredExpenseList() {
if (this.dataService.searchOption.length > 0)
this.post = this.dataService.filteredListOptions();
else {
this.post = this.dataService.filteredListOptions();
}
}
}
Это поиск -bar.component.ts:
import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { DataService } from '../../data.service';
import { Post } from '../../post';
@Component({
selector: 'app-search-bar',
templateUrl: './search-bar.component.html',
styleUrls: ['./search-bar.component.css']
})
export class SearchBarComponent implements OnInit {
myControl = new FormControl();
filteredOptions: Observable<string[]>;
allPosts: Post[];
autoCompleteList: any[]
@ViewChild('autocompleteInput') autocompleteInput: ElementRef;
@Output() onSelectedOption = new EventEmitter();
constructor(
public dataService: DataService
) { }
ngOnInit() {
// get all the post
this.dataService.getPosts().subscribe(posts => {
this.allPosts = posts
});
// when user types something in input, the value changes will come through this
this.myControl.valueChanges.subscribe(userInput => {
this.autoCompleteExpenseList(userInput);
})
}
private autoCompleteExpenseList(input) {
let categoryList = this.filterCategoryList(input)
this.autoCompleteList = categoryList;
}
// this is where filtering the data happens according to you typed value
filterCategoryList(val) {
var categoryList = []
if (typeof val != "string") {
return [];
}
if (val === '' || val === null) {
return [];
}
return val ? this.allPosts.filter(s => s.name.toLowerCase().indexOf(val.toLowerCase()) != -1)
: this.allPosts;
}
// after you clicked an autosuggest option, this function will show the field you want to show in input
displayFn(post: Post) {
let k = post ? post.name : post;
return k;
}
filterPostList(event) {
var posts = event.source.value;
if (!posts) {
this.dataService.searchOption = []
}
else {
this.dataService.searchOption.push(posts);
this.onSelectedOption.emit(this.dataService.searchOption)
}
this.focusOnPlaceInput();
}
removeOption(option) {
let index = this.dataService.searchOption.indexOf(option);
if (index >= 0)
this.dataService.searchOption.splice(index, 1);
this.focusOnPlaceInput();
this.onSelectedOption.emit(this.dataService.searchOption)
}
// focus the input field and remove any unwanted text.
focusOnPlaceInput() {
this.autocompleteInput.nativeElement.focus();
this.autocompleteInput.nativeElement.value = '';
}
}
Это post.ts, на который ссылаются:
export interface Post {
name: string,
type: string,
sweet: number,
sour: number,
salty: number,
bitter: number,
fatty: number,
umami: number,
spicy: number,
}
, а вот пример из файла. json:
[
{
"name": "bell pepper",
"type": "vegetable",
"sweet": 3,
"sour": 1,
"salty": 1,
"bitter": 2,
"fatty": 0,
"umami": 0,
"spicy": 2
},
{
"name": "salt",
"type": "spice",
"sweet": 0,
"sour": 0,
"salty": 10,
"bitter": 0,
"fatty": 0,
"umami": 0,
"spicy": 0
},
{
"name": "beef",
"type": "meat",
"sweet": 1,
"sour": 0,
"salty": 2,
"bitter": 0,
"fatty": 4,
"umami": 5,
"spicy": 0
},
{
"name": "Apple",
"type": "fruit",
"sweet": 6,
"sour": 3,
"salty": 0,
"bitter": 0,
"fatty": 0,
"umami": 0,
"spicy": 0
}
]
и вот служба данных:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Post } from './post';
@Injectable({
providedIn: 'root'
})
export class DataService {
searchOption = []
public postsData: Post[]
postUrl: string = "../assets/posts.json";
constructor(
private http: HttpClient
) { }
getPosts(): Observable<Post[]> {
return this.http.get<Post[]>("../assets/flavors.json");
}
filteredListOptions() {
let posts = this.postsData;
let filteredPostsList = [];
for (let post of posts) {
for (let options of this.searchOption) {
if (options.name === post.name) {
filteredPostsList.push(post);
}
}
}
console.log(filteredPostsList);
return filteredPostsList;
}
}
Опять же, я очень благодарен за вашу помощь здесь. Это первый раз, когда я использую Angular, и я нахожусь в конце моей веревки здесь. Спасибо!