【发布时间】：2022-08-05 01:32:11
【问题描述】：
我正在使用am5Chart 进行绘图。我有一个any 类型，它与eslint 一起失败。试图修复但没有结果。
这是我的代码：
import { AfterViewInit, Component, Inject, NgZone, PLATFORM_ID } from \'@angular/core\';
import * as am5 from \'@amcharts/amcharts5\';
import * as am5flow from \'@amcharts/amcharts5/flow\';
import am5themes_Animated from \'@amcharts/amcharts5/themes/Animated\';
import * as am5xy from \'@amcharts/amcharts5/xy\';
import { Router } from \'@angular/router\';
@Component({
selector: \'hf-workspace-graphsample\',
templateUrl: \'./sample.component.html\',
styleUrls: [\'./sample.component.scss\'],
})
export class SampleComponent implements AfterViewInit {
private root: am5.Root = am5.Root.new(\'chartdiv1\');
root1: am5.Root = am5.Root.new(\'chartdiv1\');
series: any; //here is the issue what would be the correct proptype?
data = [
{
date: \'2013-01-16\',
market0: 71,
market1: 75,
sales0: 5,
sales1: 9,
},
{
date: \'2013-01-30\',
market0: 81,
market1: 85,
sales0: 4,
sales1: 7,
},
];
constructor(public router: Router, @Inject(PLATFORM_ID) private platformId: any, private zone: NgZone) {}
ngAfterViewInit() {
this.root1.setThemes([am5themes_Animated.new(this.root1)]);
this.root1.dateFormatter.setAll({
dateFormat: \'yyyy-MM-dd\',
dateFields: [\'valueX\'],
});
const chart = this.root1.container.children.push(
am5xy.XYChart.new(this.root1, {
panX: false,
panY: false,
wheelX: \'panX\',
wheelY: \'zoomX\',
layout: this.root1.verticalLayout,
})
);
chart.events.on(
\'panended\',
function (ev: { type: \'panended\'; target: am5xy.XYChart }): void {
console.log(\'clicked on \', ev.target);
},
this
);
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
const cursor = chart.set(
\'cursor\',
am5xy.XYCursor.new(this.root1, {
behavior: \'zoomX\',
})
);
cursor.lineY.set(\'visible\', false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
const xAxis = chart.xAxes.push(
am5xy.DateAxis.new(this.root1, {
baseInterval: { timeUnit: \'day\', count: 1 },
renderer: am5xy.AxisRendererX.new(this.root1, {}),
tooltip: am5.Tooltip.new(this.root1, {}),
tooltipDateFormat: \'yyyy-MM-dd\',
})
);
const yAxis0 = chart.yAxes.push(
am5xy.ValueAxis.new(this.root1, {
renderer: am5xy.AxisRendererY.new(this.root1, {}),
})
);
const yRenderer1 = am5xy.AxisRendererY.new(this.root1, {
opposite: true,
});
yRenderer1.grid.template.set(\'forceHidden\', true);
const yAxis1 = chart.yAxes.push(
am5xy.ValueAxis.new(this.root1, {
renderer: yRenderer1,
syncWithAxis: yAxis0,
})
);
const columnSeries1 = chart.series.push(
am5xy.ColumnSeries.new(this.root1, {
name: \'Actual sales\',
xAxis: xAxis,
yAxis: yAxis0,
valueYField: \'sales1\',
valueXField: \'date\',
clustered: false,
tooltip: am5.Tooltip.new(this.root1, {
pointerOrientation: \'horizontal\',
labelText: \'{name}: {valueY}\',
}),
})
);
columnSeries1.columns.template.setAll({
width: am5.percent(60),
fillOpacity: 0.5,
strokeOpacity: 0,
});
columnSeries1.data.processor = am5.DataProcessor.new(this.root1, {
dateFields: [\'date\'],
dateFormat: \'yyyy-MM-dd\',
});
const columnSeries0 = chart.series.push(
am5xy.ColumnSeries.new(this.root1, {
name: \'Target sales\',
xAxis: xAxis,
yAxis: yAxis0,
valueYField: \'sales0\',
valueXField: \'date\',
clustered: false,
tooltip: am5.Tooltip.new(this.root1, {
pointerOrientation: \'horizontal\',
labelText: \'{name}: {valueY}\',
}),
})
);
columnSeries0.columns.template.set(\'width\', am5.percent(40));
const series0 = chart.series.push(
am5xy.SmoothedXLineSeries.new(this.root1, {
name: \'Market days\',
xAxis: xAxis,
yAxis: yAxis1,
valueYField: \'market0\',
valueXField: \'date\',
tooltip: am5.Tooltip.new(this.root1, {
pointerOrientation: \'horizontal\',
labelText: \'{name}: {valueY}\',
}),
})
);
series0.strokes.template.setAll({
strokeWidth: 2,
});
const series1 = chart.series.push(
am5xy.SmoothedXLineSeries.new(this.root1, {
name: \'Market days all\',
xAxis: xAxis,
yAxis: yAxis1,
valueYField: \'market1\',
valueXField: \'date\',
})
);
series1.strokes.template.setAll({
strokeWidth: 2,
strokeDasharray: [2, 2],
});
const tooltip1 = series1.set(
\'tooltip\',
am5.Tooltip.new(this.root1, {
pointerOrientation: \'horizontal\',
})
);
tooltip1.label.set(\'text\', \'{name}: {valueY}\');
const scrollbar = chart.set(
\'scrollbarX\',
am5xy.XYChartScrollbar.new(this.root1, {
orientation: \'horizontal\',
height: 60,
})
);
const sbDateAxis = scrollbar.chart.xAxes.push(
am5xy.DateAxis.new(this.root1, {
baseInterval: {
timeUnit: \'day\',
count: 1,
},
renderer: am5xy.AxisRendererX.new(this.root1, {}),
})
);
const sbValueAxis0 = scrollbar.chart.yAxes.push(
am5xy.ValueAxis.new(this.root1, {
renderer: am5xy.AxisRendererY.new(this.root1, {}),
})
);
const sbValueAxis1 = scrollbar.chart.yAxes.push(
am5xy.ValueAxis.new(this.root1, {
renderer: am5xy.AxisRendererY.new(this.root1, {}),
})
);
const sbSeries0 = scrollbar.chart.series.push(
am5xy.ColumnSeries.new(this.root1, {
valueYField: \'sales0\',
valueXField: \'date\',
xAxis: sbDateAxis,
yAxis: sbValueAxis0,
})
);
sbSeries0.columns.template.setAll({ fillOpacity: 0.5, strokeOpacity: 0 });
const sbSeries1 = scrollbar.chart.series.push(
am5xy.LineSeries.new(this.root1, {
valueYField: \'market0\',
valueXField: \'date\',
xAxis: sbDateAxis,
yAxis: sbValueAxis1,
})
);
const legend = chart.children.push(
am5.Legend.new(this.root1, {
x: am5.p50,
centerX: am5.p50,
})
);
legend.data.setAll(chart.series.values);
columnSeries1.data.setAll(this.data);
columnSeries0.data.setAll(this.data);
series0.data.setAll(this.data);
series1.data.setAll(this.data);
sbSeries0.data.setAll(this.data);
sbSeries1.data.setAll(this.data);
series0.appear(1000);
series1.appear(1000);
chart.appear(1000, 100);
series0.events.on(
\'click\',
function (ev: { type: \'click\'; target: am5xy.SmoothedXLineSeries }): void {
console.log(\'clicked on series0\', ev.target);
},
this
);
columnSeries0.events.on(
\'click\',
function (ev: { type: \'click\'; target: am5xy.ColumnSeries }): void {
this?.router.navigateByUrl(\'/example\');
console.log(\'clicked on columnSeries0 \', ev.target);
},
this
);
this.root = am5.Root.new(\'chartdiv\');
this.root.setThemes([am5themes_Animated.new(this.root)]);
this.series = this.root.container.children.push(
am5flow.Sankey.new(this.root, {
sourceIdField: \'from\',
targetIdField: \'to\',
valueField: \'value\',
nodeWidth: 20,
})
);
this.series.nodes.rectangles.template.setAll({
fillOpacity: 0.5,
stroke: am5.color(0x000000),
strokeWidth: 1,
cornerRadiusTL: 4,
cornerRadiusTR: 4,
cornerRadiusBL: 4,
cornerRadiusBR: 4,
});
this.series.nodes.get(\'colors\').set(\'step\', 2);
this.series.data.setAll([
{ from: \'A\', to: \'B\', value: 10 },
{ from: \'B\', to: \'C\', value: 8 },
{ from: \'C\', to: \'D\', value: 4 },
{ from: \'C\', to: \'E\', value: 3 },
{ from: \'D\', to: \'G\', value: 5 },
{ from: \'D\', to: \'I\', value: 2 },
{ from: \'D\', to: \'H\', value: 3 },
{ from: \'E\', to: \'H\', value: 6 },
{ from: \'G\', to: \'J\', value: 5 },
{ from: \'I\', to: \'J\', value: 1 },
{ from: \'H\', to: \'J\', value: 9 },
]);
this.series.nodes.rectangles.template.setAll({
fillOpacity: 0.5,
stroke: am5.color(0x000000),
strokeWidth: 1,
cornerRadiusTL: 4,
cornerRadiusTR: 4,
cornerRadiusBL: 4,
cornerRadiusBR: 4,
});
this.series.nodes.labels.template.setAll({
x: am5.percent(50),
centerX: am5.percent(50),
textAlign: \'center\',
});
}
myFunction(ev: { type: \'click\'; target: am5xy.ColumnSeries }) {
console.log(\'clicked on \', ev.target);
}
}
提前致谢
-
如果你使用来自
am5导入的类型，比如series: am5.ColumnSeries[] -
@pankaj 收到错误
Property \'series\' has no initializer and is not definitely assigned in the constructor.所以我在构造函数中尝试了`this.series = [];`。仍然存在错误 -
@PankajParkar - 再次尝试：
series: am5.ColumnSeries[] = [];错误为：has no exported member \'ColumnSeries\'.ts(2694) -
你能检查一下this docs link，如果有帮助吗？
标签： angular typescript typescript-typings amcharts5