javascript - 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
问题
解决方案
推荐阅读
- python - Python HTTP 请求错误的字符编码
- sql - 主键类型 Guid 还是 Int?
- python - vscode intellisense 使用 PyQt4 太慢了
- c++ - C++ malloc/realloc 奇怪的行为
- javascript - Vue/Vuetify - 未知的自定义元素:
- 您是否正确注册了组件? - java - 获取从另一个类创建的变量
- javascript - hint.js:96 Uncaught ReferenceError: isUndefined is not defined
- mysql - MySql for Excel - 导入订单错误
- css - 在纯 CSS 中覆盖没有 !important 的样式
- makefile - 从另一个目录运行configure、make、make install