0

我正在使用融合图表，并且我的功能需要在触发特定事件时重定向到新页面。我已经成功创建了事件处理程序。但是，无法从事件处理程序中访问路由器变量。

我在组件类中包含了角度路由器，并在构造函数中注入了路由器。

我的代码看起来像这样

export class StoregradesComponent implements OnInit {
  type = "treemap";
  width = "980";
  height = "400";
  dataFormat = "json";
  dataSource = [];
  treeMapData:any = {};
  bStoreGrades = false;

  constructor(private userService: UserdataService, private router: Router, private route: ActivatedRoute, private spinner: NgxSpinnerService) { 
  }

  public url:string = "http://localhost/stores/getData?id=1"

  ngOnInit() {
    this.spinner.show();
    this.userService.getData(this.url).subscribe(data => {
      debugger;
      this.dataSource = data;
      this.treeMapData = {
        "chart": {
          "animation": "0",
          "hideTitle": "1",     
          "horizontalPadding": "0",
          "verticalPadding": "0",
          "plotborderthickness": ".5",
          "plotbordercolor": "ffffff",
          "chartBottomMargin": "0",
          "labelGlow": "0",
          "labelFontColor": "000000",
          "legendpadding": "0",
          "legendItemFontSize": "10",
          "legendItemFontBold": "1",
          "legendPointerWidth": "8",
          "legenditemfontcolor": "3d5c5c",
          "legendScaleLineThickness": "0",
          "legendCaptionFontSize": "10",
          "algorithm": "squarified",
          "showchildlabels": "1",
          "labelFontSize": "12",
          "labelFontBold": "1",
          "showLegend": "0"
        },
        "colorrange": {
          "mapbypercent": "0",
          "gradient": "1",
          "minvalue": "0",
          "code": "dfff72",
          "startlabel": "Ideal",
          "endlabel": "Threshold",
          "color": [{
            "code": "062a3f",
            "maxvalue": "5",
            "label": "Threshold"
          }]
        },
        "data": this.dataSource
      }      
    this.spinner.hide();
    });
  }

  events = {
    "dataPlotClick": function($e) {
      debugger;
      this.router.navigate(['sales'],{relativeTo: this.route})
    }
  }
}

调用dataPlotClick事件时出现此错误

zone-evergreen.js:172 Uncaught TypeError: Cannot read property 'navigate' of undefined
    at e.dataPlotClick (storegrades.component.ts:95)
    at i (fusioncharts.js:13)
    at o (fusioncharts.js:13)
    at f (fusioncharts.js:13)
    at e.r.fireChartInstanceEvent (fusioncharts.js:14)
    at click (fusioncharts.treemap.js:1)
    at Object.<anonymous> (fusioncharts.treemap.js:1)
    at e.i._firePlotEvent (fusioncharts.treemap.js:1)
    at e.i._mouseEvtHandler (fusioncharts.treemap.js:1)
    at t.handler (fusioncharts.js:28)
dataPlotClick @ storegrades.component.ts:95
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
r.fireChartInstanceEvent @ fusioncharts.js:14
click @ fusioncharts.treemap.js:1
(anonymous) @ fusioncharts.treemap.js:1
i._firePlotEvent @ fusioncharts.treemap.js:1
i._mouseEvtHandler @ fusioncharts.treemap.js:1
t.handler @ fusioncharts.js:28
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
t.fireEvent @ fusioncharts.js:13
n.length.o._middleListeners.<computed>.o._middleListeners.<computed> @ fusioncharts.js:13
n @ fusioncharts.js:13
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
setTimeout (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto.<computed> @ zone-evergreen.js:1428
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
r.fireChartInstanceEvent @ fusioncharts.js:14
click @ fusioncharts.treemap.js:1
(anonymous) @ fusioncharts.treemap.js:1
i._firePlotEvent @ fusioncharts.treemap.js:1
i._mouseEvtHandler @ fusioncharts.treemap.js:1
t.handler @ fusioncharts.js:28
i @ fusioncharts.js:13
o @ fusioncharts.js:13
f @ fusioncharts.js:13
t.fireEvent @ fusioncharts.js:13
n.length.o._middleListeners.<computed>.o._middleListeners.<computed> @ fusioncharts.js:13
n @ fusioncharts.js:13
invokeTask @ zone-evergreen.js:391
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

谁能告诉我哪里出错了？

4

1 回答 1

2

您可以实现 FusionCharts 支持的链接属性，以便在单击数据图时导航特定 URL。请检查以下方式。

{
"chart": {
   ...
},
"data": [{
    "label": "Apple",
    "value": "810000",
    "link": "https://en.wikipedia.org/wiki/Apple"
}, {
    "label": "Cranberry",
    "value": "620000",
    "link": "https://en.wikipedia.org/wiki/Cranberry"
}, {
    "label": "Grapes",
    "value": "350000",
    "link": "https://en.wikipedia.org/wiki/Grape"
}]

}

于 2020-01-06T12:47:27.193 回答