Javascript Amstock chart没有'；t放大初始化事件_Javascript_Amcharts_Amstock

Javascript Amstock chart没有'；t放大初始化事件

javascript

Javascript Amstock chart没有'；t放大初始化事件,javascript,amcharts,amstock,Javascript,Amcharts,Amstock,我需要在init事件中将图表缩放到指定的时段 "listeners": [{ "event": "zoomed", "method": this.calulateMetrics },{ "event": "dataUpdated", "method": this.showPeriod }, { "event": "init", "method": this.show

我需要在

init

事件中将图表缩放到指定的时段

      "listeners": [{
        "event": "zoomed",
        "method": this.calulateMetrics
      },{
        "event": "dataUpdated",
        "method": this.showPeriod
      }, {
        "event": "init",
        "method": this.showPeriod
      },{
        "event": "rendered",
        "method": this.showPeriod
      }],


  showPeriod(event) {
    // Retrieve the data
    let dates = this.$store.getters.getDates
    let startDate = dates[0]
    let endDate = (dates[dates.length - 1])
    endDate.setHours(22)
    try {
      this.chart.zoom(startDate, endDate)
      console.log("Last date", endDate)
    } catch(err) {
      console.log("Error",(err.message))
    }
  },

虽然我不能捕捉到任何错误，但周期保持不变。在

init

旁边，我尝试了

rendered

和

dataUpdated

，但也没有帮到我

但是，当我触发调用外部事件按钮时，它工作正常

整个选项文件如下所示：

   this.chart = window.AmCharts.makeChart("chartdiv", {
      "path": AmCharts_path,
      "type": "stock",
      "theme": "light",

      "dataSets": this.$store.state.portfoliosData.performance.map(function (port, idx) {
        return {
          "title": port.name,
          "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
          }],
          "dataProvider": port.data,
          "compared": (idx === 0 ? false : true),
          "categoryField": "date"
        }
      }),

      "panels": [{
        "title": "Value",
        "percentHeight": 70,
        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender
          }]
      }],

      "chartScrollbarSettings": {
        "graph": "g1",
        "markPeriodChange": true
      },

      "categoryAxis": {
        "parseDates": true,
      },

      "categoryAxesSettings": {
        "groupToPeriods": ["DD"]
      },

      "balloon": {
          "fixedPosition": true,
          "maxWidth": 10000,
          "offsetY": 1,
      },

      "dataDateFormat": "YYYY-MM-DD",

      "chartCursorSettings": {
        "valueBalloonsEnabled": true,
        "categoryBalloonEnabled": true,
        "selectWithoutZooming": true,
        "showNextAvailable": true,
        "categoryBalloonAlpha": 0.8,
        "bulletsEnabled": true,
        "bulletSize": 10,
        "valueZoomable":true,
        "usePeriod": "DD",
        "categoryBalloonDateFormats": [
            {period:'fff',format:'JJ:NN:SS'},
            {period:'ss',format:'JJ:NN:SS'},
            {period:'mm',format:'JJ:NN'},
            {period:'hh',format:'JJ:NN'},
            {period:'DD',format:'EEEE, MMM DD'},
            {period:'WW',format:'EEEE, MMM DD'},
            {period:'MM',format:'MMM'},
            {period:'YYYY',format:'YYYY'}
          ]
      },

       "periodSelector": {
         "position": "bottom"
      },
    });
  },

可以找到复制链接

主要问题是，AMSharts的侦听器回调不理解您的组件范围<代码>回调中的此指的是AMSCHARTS的回调范围，而不是您的组件。每个AmCharts侦听器在事件的

chart

属性（例如，请参见）中提供对自身的引用，因此将回调中的所有

this.chart

行更改为

event.chart

，将解决这部分问题。如果需要对组件本身的引用，请在

renderGraph（）

方法中向图表对象添加自定义属性，然后通过

事件引用该属性。图表

：

  renderGraph() {
    // ...
    this.chart = window.AmCharts.makeChart("chartdiv", {
      // ...
      componentRef: this,
      // ...
    })
  }

  //example using initPeriod:
  initPeriod(event) { //event parameter contains {type: "init", chart: stockChartReference}
    console.log("init period")
    let dates = event.chart.componentRef.$store.getters.getDates
    let startDate = dates[0]
    let endDate = (dates[dates.length - 1])
    endDate.setHours(22)
    try {
      event.chart.zoom(startDate, endDate)
      console.log("Last date", endDate)
    } catch(err) {
      console.log("Error",(err.message))
    }
  },

您的

zoomed

侦听器正在引用一个名为

calulateMetrics

的未定义方法。我在amstore中看到一个名为

calculateMetrics

的方法，但我不确定这是否是您的意思，将其更改为似乎对我不起作用，因此我请您添加适当的方法。添加缺少的方法，并确保像其他回调一样正确引用图表对象，将解决您的问题

除了由于缺少方法而缩放的之外的所有内容的演示：

主要问题是AmCharts的侦听器回调不理解您的组件范围<代码>回调中的此指的是AMSCHARTS的回调范围，而不是您的组件。每个AmCharts侦听器在事件的

chart