在Angular Highcharts中使用模式时出错

问题描述

我需要有关Angular-Highcharts的适当文档以进行图案填充。每当我使用下面的代码时，patter属性都会出错。我什至尝试了下面的链接，但没有解决我的问题。

How to use highchart pattern fill in angular?

series: [
{
  type: 'column',name: 'Total Revenue',color: {
    pattern: {
      path: {
        d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',strokeWidth: 3
      },width: 10,height: 10,opacity: 0.4
    }
  },data: [],id: 'revenueTrends',showInLegend: false
},{
  type: 'line',name: 'Rolling year average',id: 'rollingYearavg',color: '#002750',linewidth: 1,label: {
    enabled: false
  },marker: {
    radius: 5
  },showInLegend: true
}
]

解决方法

您所指的线程与highcharts-angular而不是angular-highcharts相关（区别在于第一个是官方包装，第二个是第三方产品），所以我是假设您正在询问highcharts-angular的方式。

您遇到的错误可能与打字稿有关-您的模式选项对象缺少一些必需的属性。要解决此问题，您可以添加所有这些对象，或者如果您确定它们不是必需的，并且图表无需它们将整个对象都投射到as unknown as Highcharts.PatternObject

即可正常工作

   series: [
      {
        type: "column",name: "Total Revenue",color: {
          pattern: {
            path: {
              d: "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11",strokeWidth: 3
            },width: 10,height: 10,opacity: 0.4
          }
        } as unknown as Highcharts.PatternObject,data: [1,2,3],id: "revenueTrends",showInLegend: false
      }
    ]

API参考： https://api.highcharts.com/class-reference/Highcharts.PatternOptionsObject

实时演示： https://stackblitz.com/edit/highcharts-angular-basic-line-7bxgyt

您可以在其GitHub存储库中找到有关使用highcharts-angular包装器的更多信息，请访问：https://github.com/highcharts/highcharts-angular

angular highcharts