Amcharts: chartScrollbar не определен в обратном вызове события
Я хочу повторить следующий пример.
Когда я пытаюсь получить доступ к свойству chartBoard, я получаю сообщение об ошибке, что этот объект 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);
});
},
Это странно, потому что chartScrollbar
не имеет никаких событий или методов в соответствии с документами.
Это варианты моего графика
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"
},
});
Код воспроизведения здесь
Хотя пример кода для последовательных графов, я думаю, это должно быть хорошо для stock
также