javascript - Amstock 图表不放大初始化事件
问题描述
我需要将图表缩放到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
但它也没有帮助我。
但是当我触发对外部事件的调用时,<v-btn v-on:click="showPeriod">Button</v-btn>
它工作正常。
整个选项文件如下:
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"
},
});
},
复制链接可以在这里找到
解决方案
主要问题是 AmCharts 的侦听器回调不了解您的组件范围。this
在回调中指的是 AmCharts 的回调范围,而不是您的组件。chart
每个 AmCharts 侦听器都在事件的属性中提供对自身的引用(init
例如,请参阅 ),因此将所有this.chart
行更改为event.chart
回调中的行将解决该部分问题。如果您需要对组件本身的引用,请在您的renderGraph()
方法中向图表对象添加一个自定义属性,然后通过以下方式引用它event.chart
:
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
. 我看到一个calculateMetrics
在 amstore 中调用的方法,但我不确定这是否是您的意思,并且将其更改为该方法似乎对我不起作用,所以我在添加适当的方法时请您听从。添加缺少的方法以及确保您像其他回调一样正确引用图表对象将解决您的问题。
zoomed
除缺少方法外的所有内容的演示: https ://codesandbox.io/s/5wpopzwlnp
推荐阅读
- python - 如何在 python 中使用 pyopenssl 模块将证书链转储到 PEM 文件中
- python - What would be the python function that returns a list of elements that only appear once in a list
- r - R:在 0 x 0 矩阵上调用 apply 会导致调用 FUN(numeric(0))。为什么?这可以预防吗?
- c - 我在 C 中的函数出现问题,尝试使用较小的块方法计算回归斜率。谁能帮我找出我的错误?
- java - 每次在 Snake 游戏中增长时,都希望提高 Snake 的速度
- xamarin.forms - Xamarin 表单的 Wootric 集成
- python - 用相应属性的其他行的值有效地填充 df nan 字段?
- swift - 如何在 for 循环中排序(swift)
- c++ - 如何在 C++ 中读取以空格分隔且数据量不确定的文本文件?
- xgboost - 是否需要将值转换为 xgboost 的百分比?