0

我正在尝试按照此入门来创建外部缩放控制。

我有 3 个按钮

  <v-btn v-on:click="showPeriod('1 month')">1 month</v-btn>
  <v-btn v-on:click="showPeriod('3 month')">3 month</v-btn>
  <v-btn v-on:click="showPeriod('6 month')">6 month</v-btn>

和eventListener showPeriod

  showPeriod: function(period) {
    console.log("Periods", this.periods)
    if (period != 'All'){
      this.changeDataZoom(this.periods[period])
    }
    else {
      //Logic fot 'ALL' period
    }
  },

  changeDataZoom: function (rawPeriod) {
    let regex = /([0-9]{2,4}[\-][0-9]{2}[\-][0-9]{2}).*?/g
    let periods = []

    rawPeriod.match(regex).forEach(function (period) {
      periods.push(moment(period,"YYYY-MM-D").format("YYYY-MM-DD"))
    })

    //Periods ["2018-01-26", "2018-07-27"]
    this.chart.zoomToDates(periods[0], periods[1])
  },

但是当我试图打电话时，this.chart.zoomToDates我收到一个错误“TypeError：this.chart.zoomToDates is not a function”

我也尝试使用将字符串转换为日期，AmCharts.stringToDate但它也没有帮助我。 重现错误的链接

PS 我知道periods财产 - 但在这种情况下 1 个月实际上不是日历月，所以我需要手动指定日期。

4

1 回答 1

3

该 codepen 使用串行图表，而您正在使用股票图表。

序列图有方法zoomToDates

zoomToDates(start, end)
start - 开始日期，Date 对象 \ end - 结束日期，Date 对象


股票图表有方法缩放

zoom(startDate, endDate)
startDate, endDate -日期对象。

所以，你需要这样的东西：

changeDataZoom: function (rawPeriod) {
    let regex = /([0-9]{2,4}[\-][0-9]{2}[\-][0-9]{2}).*?/g
    let periods = []

    rawPeriod.match(regex).forEach(function (period) {
      periods.push(moment(period,"YYYY-MM-D").format("YYYY-MM-DD"))
    })

    //Periods ["2018-01-26", "2018-07-27"]
    this.chart.zoom(new Date(periods[0]), new Date(periods[1]))
}
于 2018-07-30T07:48:20.307 回答