javascript - Chart.js 属性“类型”的类型不兼容。类型 'string' 不可分配给类型 '"line" | “酒吧” | “分散”
问题描述
client:159 src/app/analytics-page/analytics-page.component.ts:211:26 - error TS2345: Argument of type '{ type: string; options: { responsive: boolean; }; data: { labels: string[]; datasets: { label: string; data: number[]; borderColor: string; steppedLine: boolean; fill: boolean; }[]; }; }' is not assignable to parameter of type 'ChartConfiguration<"line" | "bar" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar", number[], string>'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"line" | "bar" | "scatter" | "bubble" | "pie" | "doughnut" | "polarArea" | "radar"'.
211 new Chart(gainCtx, createChartConfig(gainConfig))
import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core'
import {AnalyticsService} from '../shared/services/analytics.service'
import {AnalyticsPage, ChartConfig} from '../shared/interfaces'
import {Chart} from 'chart.js'
import {Subscription} from 'rxjs'
@Component({
selector: 'app-analytics-page',
templateUrl: './analytics-page.component.html',
styleUrls: ['./analytics-page.component.scss']
})
export class AnalyticsPageComponent implements AfterViewInit, OnDestroy {
@ViewChild('gain') gainRef!: ElementRef
@ViewChild('order') orderRef!: ElementRef
aSub!: Subscription
average!: number
pending = true
constructor(private service: AnalyticsService) {
}
ngAfterViewInit() {
const gainConfig: any = {
label: 'Выручка',
color: 'rgb(255, 99, 132)'
}
const orderConfig: any = {
label: 'Заказы',
color: 'rgb(54, 162, 235)'
}
this.aSub = this.service.getAnalytics().subscribe((data: AnalyticsPage) => {
this.average = data.average
gainConfig.labels = data.chart.map(item => item.label)
gainConfig.data = data.chart.map(item => item.gain)
orderConfig.labels = data.chart.map(item => item.label)
orderConfig.data = data.chart.map(item => item.order)
// **** Gain ****
// gainConfig.labels.push('08.05.2018')
// gainConfig.labels.push('09.05.2018')
// gainConfig.data.push(1500)
// gainConfig.data.push(700)
// **** /Gain ****
// **** Order ****
// orderConfig.labels.push('08.05.2018')
// orderConfig.labels.push('09.05.2018')
// orderConfig.data.push(8)
// orderConfig.data.push(2)
// **** /Order ****
const gainCtx = this.gainRef.nativeElement.getContext('2d')
const orderCtx = this.orderRef.nativeElement.getContext('2d')
gainCtx.canvas.height = '300px'
orderCtx.canvas.height = '300px'
new Chart(gainCtx, createChartConfig(gainConfig))
new Chart(orderCtx, createChartConfig(orderConfig))
this.pending = false
})
}
ngOnDestroy() {
if (this.aSub) {
this.aSub.unsubscribe()
}
}
}
function createChartConfig({labels, data, label, color}: ChartConfig) {
return {
type: 'line',
options: {
responsive: true
},
data: {
labels,
datasets: [
{
label, data,
borderColor: color,
steppedLine: false,
fill: false
}
]
}
}
}
问题出在type: 'line',
. Chart.js 不工作,它不适用于任何类型,抛出错误。
解决方案
看起来您的 TypeScript 编译器正在抱怨,因为图表type
属性是特定类型而不是字符串。
选项1:
导入 ChartType 并转换type
为ChartType
.
import { Chart, ChartType, ...} from 'chart.js';
...
function createChartConfig({labels, data, label, color}: ChartConfig) {
return {
type: 'line' as ChartType,
options: {
...
选项2:(更简单/黑客的方式)
将整个配置转换为 any。
new Chart(gainCtx, createChartConfig(gainConfig) as any);
在任何情况下,您都需要导入和注册所需的控制器、元素、比例等。注册registerables
会注册所有内容,但最好只注册特定图表所需的内容。有关详细信息,请参阅集成说明。
import { Chart, registerables } from 'chart.js';
...
Chart.register(...registerables);
推荐阅读
- arrays - 如果单元格只有数字值,如何将数据获取到其他工作表
- python - Python 使用回溯存储并引发最后一个异常
- javascript - 在chartjs中查找图表线之间的交点
- docker - Compute Engine 无法连接到 Container Registry
- c++ - 类模板别名在生成的符号中不应该是可见的,是吗?
- python - Matplotlib 在同一刻度点(时间和日期)显示次要刻度标签和主要刻度标签
- android - 迁移到 Androidx 后 SwitchCompat 为白色
- angular - 在执行 ng build --prod 之后,有什么方法可以从 dist 文件夹中恢复角度(4、5、6、任何版本)源代码?
- java - MysqldResource 不适用于 MacOS Catalina
- filter - 查询如何在 Vapor 中工作?