javascript - Amcharts“TypeError:this.chart.zoomToDates 不是函数”
问题描述
我正在尝试按照此入门来创建外部缩放控制。
我有 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 个月实际上不是日历月,所以我需要手动指定日期。
解决方案
该 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]))
}
推荐阅读
- sql - 获取特定值之前的最后一行
- naming - 您会推荐发送和持久化一些消息的方法的哪个名称?
- python - 如何解决,tensorflow.python.framework.errors_impl.InvalidArgumentError?
- mysql - MYSQL:从两个表中获取最小值和分组依据
- typescript - 当键不是字符串时,如何遍历对象的键?
- tensorflow - 将 x_train 作为 numpy 数组列表传递给 tf.data.Dataset 不起作用
- html - 最新 Safari 上的 Flexbox 布局 - 压缩内容与拉伸内容
- python - Plotnine 为 DataFrame 中的每个条目打印一行
- amazon-web-services - aws cli 输出调试信息,无需我要求
- php - Windows系统下全局使用composer报错