Amstock 图表不会放大 init 事件
Amstock chart doesn't zoom on init event
我需要将我的图表缩放到 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"
},
});
},
复制link可寻here
主要问题是 AmCharts 的侦听器回调不理解您的组件范围。回调中的 this
指的是 AmCharts 的回调范围,而不是您的组件。每个 AmCharts 侦听器都在事件的 chart
属性 中提供对自身的引用(例如,参见 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
的未定义方法。我在 amstore 中看到一个名为 calculateMetrics
的方法,但我不确定这是否是您的意思并且将其更改为它似乎对我不起作用,所以我推迟添加适当的方法。添加缺少的方法并确保您像其他回调一样正确引用图表对象将解决您的问题。
由于缺少方法,除 zoomed
之外的所有内容的演示:https://codesandbox.io/s/5wpopzwlnp
我需要将我的图表缩放到 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"
},
});
},
复制link可寻here
主要问题是 AmCharts 的侦听器回调不理解您的组件范围。回调中的 this
指的是 AmCharts 的回调范围,而不是您的组件。每个 AmCharts 侦听器都在事件的 chart
属性 中提供对自身的引用(例如,参见 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
的未定义方法。我在 amstore 中看到一个名为 calculateMetrics
的方法,但我不确定这是否是您的意思并且将其更改为它似乎对我不起作用,所以我推迟添加适当的方法。添加缺少的方法并确保您像其他回调一样正确引用图表对象将解决您的问题。
由于缺少方法,除 zoomed
之外的所有内容的演示:https://codesandbox.io/s/5wpopzwlnp