Angular 6 Chartist Donut Chart не загружается при первом получении данных из API
"Я использую Angular 6. У меня есть кольцевая диаграмма на приборной панели, при которой данные не загружаются в первый раз, когда я захожу на другую страницу и возвращаюсь к отображению пончиковой диаграммы. При обновлении также исчезают данные. Я получаю данные API с помощью резольвера. График и другие компоненты загружаются, но не этот график. Он работает совершенно нормально, когда передаются статические данные."
import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
import { ChartType, ChartEvent } from "ng-chartist/dist/chartist.component";
import { ActivatedRoute } from '@angular/router';
var obtained: any
export interface Chart {
type: ChartType;
data: Chartist.IChartistData;
options?: any;
responsiveOptions?: any;
events?: ChartEvent;
}
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
total: any
obtained: any
public dataApi: any;
constructor(private route:ActivatedRoute) {
}
ngOnInit() {
this.dataApi = this.route.snapshot.data['dashboard'];
if(this.dataApi.status_code==1)
{
obtained = this.dataApi.data1.obtained
}
}
dash: any ={
"series": [
{
"name": "progress",
"className": "ct-grey",
"value": 50-obtained
},
{
"name": "done",
"className": "ct-allow",
"value": obtained
}
]
}
DonutChart: Chart = {
type: 'Pie',
data: this.dash,
options: {
donut: true,
startAngle: 0,
labelInterpolationFnc: function (value) {
return obtained;
}
},
events: {
draw(data: any): void {
if (data.type === 'label') {
if (data.index === 0) {
data.element.attr({
dx: data.element.root().width() / 2,
dy: data.element.root().height() / 2
});
} else {
data.element.remove();
}
}
}
}
};
}
1 ответ
Я только что получил работу чартиста на угловом 6. Я использую js, чтобы исправить это вместо ts.
Установите эти:
npm i chartist --save
npm i @types/chartist --save-dev
затем добавьте css и js в angular.json
"scripts": ["node_modules/chartist/dist/chartist.min.js"],
"styles": ["node_modules/chartist/dist/chartist.min.css"]
в app.component
declare let $: any;
import * as Chartist from 'chartist';
...
ngOnInit() {
const me = this;
setTimeout(() => {
me.loadChart();
}, 500);
}
loadChart() {
$(function() {
var chart = new Chartist.Pie('.ct-chart', {
series: [10, 20, 50, 20, 5, 50, 15],
labels: [1, 2, 3, 4, 5, 6, 7]
}, {
donut: true,
showLabel: false
});
chart.on('draw', function(data) {
if(data.type === 'slice') {
// Get the total path length in order to use for dash array animation
var pathLength = data.element._node.getTotalLength();
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
data.element.attr({
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
});
// Create animation definition while also assigning an ID to the animation for later sync usage
var animationDefinition = {
'stroke-dashoffset': {
id: 'anim' + data.index,
dur: 1000,
from: -pathLength + 'px',
to: '0px',
easing: Chartist.Svg.Easing.easeOutQuint,
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
fill: 'freeze'
}
};
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
if(data.index !== 0) {
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
}
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
data.element.attr({
'stroke-dashoffset': -pathLength + 'px'
});
// We can't use guided mode as the animations need to rely on setting begin manually
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
data.element.animate(animationDefinition, false);
}
});
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
});
}
в app.html
<div class="ct-chart ct-perfect-fourth"></div>
Перейдите на страницу https://gionkunz.github.io/chartist-js/examples.html и скопируйте вставьте туда любой пример диаграммы в свое приложение. должно работать без проблем =)
Я хотел, чтобы он был инкапсулирован в один компонент, где я мог бы связывать данные, поэтому мне это понравилось:
npm install chartist --save
npm install @type/chartist --save-dev
Создайте простой компонент
/* bar-char.component.ts' */
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { Bar, IChartistBarChart, IChartistData } from 'chartist';
@Component({
selector: 'bar-chart',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None, // <-- Very important otherwise style imported from node_modules wont apply
template: `<div #elt></div>`,
styleUrls: [
'./bar-char.component.scss'
]
})
export class BarChartComponent implements AfterViewInit {
@Input() public data: IChartistData;
public chart: IChartistBarChart;
@ViewChild('elt', { static: false })
private elt: ElementRef;
public ngAfterViewInit(): void {
if (this.data) {
this.chart = new Bar(this.elt.nativeElement, this.data);
}
}
}
Затем в scss компонента импортируем стили из диаграммы
/* bar-char.component.scss' */
@import '~chartist/dist/scss/chartist.scss'; /* <-- import styles from chartist node_modules */
Мы бы использовали это так:
/* app.component.ts */
@Component({
selector: 'pms-root',
template: `<bar-chart [data]="myChartData"></bar-chart>`
})
export class AppComponent {
public myChartData: IChartistData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
/* Don't forget to declare it in your module */
@NgModule({
declarations: [
BarChartComponent, // ...
Проверено на angular 8
У меня была та же проблема, и я получил это работает. Кажется, часы находятся только на внешнем объекте данных. Если вы просто измените базовый ряд и метки, это не вызовет перерисовку диаграммы.
Однако, если вы замените весь объект данных внутри объекта диаграммы, это вызовет перерисовку. Работает для меня.
Также, если у вас все еще есть проблемы, вы всегда можете напрямую вызвать API следующим образом:
var chartDom = document.getElementById("mychart");
if(chartDom && chartDom["__chartist__"])
chartDom["__chartist__"]["update"]();