Amcharts: chartScrollbar is undefined in event callback

问题

I want to replicate the following example.

When I try to access the chartBoard property I receive an error that this object is undefined.

  rendereMethod(e) {
    console.log("rendered")
    var sb = e.chart.chartScrollbar.set.node;
    sb.addEventListener("mousedown", function() {
      e.chart.mouseIsDown = true;
    });
    e.chart.chartDiv.addEventListener("mouseup", function() {
      e.chart.mouseIsDown = false;
      // zoomed finished
      console.log("zoom finished", e.chart.lastZoomed);
    });
  },

That is weird because chartScrollbar doesn't have any events or methods according to docs.

This is the options of my graph

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

      "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,
        "componentRef": this,
        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender
          }],
      }],

      "chartScrollbarSettings": {
        "markPeriodChange": true,
        "usePeriod": "DD",
        "autoGridCount": true,
        "graph": "g1",
        "scrollbarHeight": 40
      },

      "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'}
          ]
      },

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

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

Reproduction code is here

Although the example code is for serial graphs, I guess it should be fine for stock as well

来源：https://stackoverflow.com/questions/51667781/amcharts-chartscrollbar-is-undefined-in-event-callback