kendo-chart-tooltip 生成脚本错误 Uncaught TypeError: background.isDark is not a function

Question

enter image description here我创建了一个带有 kendo-chart-tooltip 的 kendo 图表。 平台角 5 但是 kendo-chart-tooltip 无法正常工作并在控制台中生成脚本错误。

zone.js:192 Uncaught TypeError: background.isDark is not a function
    at Tooltip.show (base-tooltip.js:51)
    at Tooltip.show (tooltip.js:24)
    at Chart._displayTooltip (chart.js:1085)
    at Chart._startHover (chart.js:1061)
    at Chart._mouseover (chart.js:1231)
    at Surface.trigger (observable.js:94)
    at HTMLDivElement.eval (surface.js:135)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask [as invoke] (zone.js:496)
    
Tried many ways to solve this but fails.

这是我的 claim-summary.component.html component.ts 文件模板 sn-p

<div class="row" id="claim-summary-chart">
        <div class="loading-image" *ngIf="loadingData"></div>

        <div class="col-md-24">
            <div class="report-sub-title">{{policyNoAndInsuredText}} <span class="pannable_msg">{{pannableMsg}}</span>
            </div>

            <kendo-chart [legend]="chartOptions.legend"
                         [seriesDefaults]="chartOptions.seriesDefaults"
                         [valueAxis]="chartOptions.valueAxis"
                         [categoryAxis]="chartOptions.categoryAxis"
                         [plotArea]="chartOptions.plotArea"
                         [pannable]="true">

                <kendo-chart-tooltip>
                    <ng-template kendoChartSeriesTooltipTemplate let-value="value" let-series="series">
                        <span *ngIf="series.field.includes('Count')">{{series.name}} : {{value}}</span>
                        <span *ngIf="!series.field.includes('Count')">{{series.name}}
                            : {{intl.formatNumber(value, "c")}}</span>
                    </ng-template>
                </kendo-chart-tooltip>

                <kendo-chart-series>
                    <kendo-chart-series-item
                        *ngFor="let s of chartOptions.series"
                        [data]="chartData"
                        [name]="s.name"
                        [field]="s.field"
                        [type]="s.type"
                        [axis]="s.axis"
                        [categoryField]="chartOptions.categoryAxis.field"
                        [color]="s.color">
                    </kendo-chart-series-item>
                </kendo-chart-series>
            </kendo-chart>

        </div>  
        

如果我删除 .. 则没有脚本错误。

这个下面是component.ts文件sn-p

import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {DataStateChangeEvent, GridComponent, GridDataResult, RowClassArgs} from "@progress/kendo-angular-grid";
import {IntlService} from "@progress/kendo-angular-intl";
import {groupBy, orderBy, process, State} from "@progress/kendo-data-query";
import {AppConfig} from "../../shared/app-config";
import {CommUtils} from "../../shared/comm-utils";
import {DataSourceService} from "../../shared/data-source-service";
import {BarchartMode, Filter, FilterService, Report, reportList, ReportName} from "../../shared/filter-service";
import {reportOptions} from "../../shared/report-options";
import {PdfDataService} from "../pdf-export/pdf-data-service";
import {ReportParametersPanel} from "../report-parameters-panel";


const initState: State = {
  skip: 0,
  take: 10
};

const totalClaimIncurredSeriesTitle: String = "Total Claims Incurred ($)";
const avgClaimIncurredSeriesTitle: String = "Average Claims Incurred ($)";


let lastRowPeriod: string = null; // year period of last row

@Component({
  selector: 'claim-summary',
  templateUrl: './claim-summary.component.html',
  styles: [`
      .footerColumn {
          color: #767676;
      }
  `],
  encapsulation: ViewEncapsulation.None
})

export class ClaimSummaryReportComponent implements OnInit {

Snippet from package.json

  "@progress/kendo-angular-charts": "3.9.1",
    "@progress/kendo-angular-dateinputs": "2.0.0",
    "@progress/kendo-angular-dialog": "3.1.2",
    "@progress/kendo-angular-dropdowns": "2.0.0",
    "@progress/kendo-angular-excel-export": "1.0.5",
    "@progress/kendo-angular-grid": "2.1.0",
    "@progress/kendo-angular-inputs": "2.0.0",
    "@progress/kendo-angular-intl": "^1.4.0",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-angular-layout": "2.0.0",
    "@progress/kendo-angular-pdf-export": "1.0.2",
    "@progress/kendo-angular-popup": "^2.1.0",
    "@progress/kendo-data-query": "1.1.2",
    "@progress/kendo-drawing": "1.4.1",
    "@progress/kendo-theme-bootstrap": "2.11.0",
    "@progress/kendo-ui": "2017.2.621",

Answer 1

我通过将包@progress/kendo-drawing 更新到版本1.16.1 解决了这个问题。老版本没有方法isDark