[英]Amcharts: category data is not shown while changing the cursor
In an Amstock examples ( 1 , 2 ) I saw that the category field block is enabled during moving a cursor. 在一个实施例Amstock( 1 , 2 )我看到移动光标在类别字段块被启用。
However I didn't manage to replicate this logic in my project 但是我没有设法在我的项目中复制这种逻辑
My chartCursorSettings
are following 我的
chartCursorSettings
正在关注
this.chart = window.AmCharts.makeChart("chartdiv", {
"path": AmCharts_path,
"type": "stock",
"theme": "light",
"dataSets": portfolioData.map(function (port, idx) {
return {
"title": port.name,
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": port.data,
"compared": (idx === 0 ? false : true),
"categoryField": "date"
}
}),
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [
{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonFunction": this.ballonRender,
"compareGraphBalloonFunction": this.ballonRender
}]
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"categoryAxis": {
"parseDates": true
},
"balloon": {
"fixedPosition": true,
"maxWidth": 10000
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"categoryBalloonEnabled": true,
"categoryBalloonAlpha": 0.2,
"bulletsEnabled": true,
"bulletSize": 10,
"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:'MMM DD'},
{period:'WW',format:'MMM DD'},
{period:'MM',format:'MMM'},
{period:'YYYY',format:'YYYY'}
]
},
"listeners": [{
"event": "zoomed",
"method": this.calulateMetrics
}],
"periodSelector": {
"position": "bottom",
"periods": [{
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "MM",
"count": 3,
"label": "3 month"
}, {
"period": "MM",
"count": 6,
"label": "6 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"selected": true,
"label": "All"
}]
},
});
},
Also I set parseDates
to true
我也将
parseDates
设置为true
"categoryAxis": {
"parseDates": true
},
I tried to specify the "dataDateFormat": "YYYY-MM-DD"
but it didn't help me either. 我尝试指定
"dataDateFormat": "YYYY-MM-DD"
但它也没有帮助我。
How can I enable this field? 如何启用此字段?
I pass the JavaScript Date
object to category field. 我将JavaScript
Date
对象传递给category字段。
The categoryBalloon from the chartCursor requires that the categoryAxis
be visible. chartCursor中的
categoryAxis
要求categoryAxis
是可见的。 Setting showCategoryAxis: false
in your panel effectively removes the balloon since you're removing the category axis. 在面板中设置
showCategoryAxis: false
可以有效地删除气球,因为您要删除类别轴。
If you don't want the categoryAxis labels but want the category balloon, set labelsEnabled
to false
in your categoryAxesSettings
. 如果你不想为CategoryAxis标签,但所需的类别气球,设置
labelsEnabled
以false
你categoryAxesSettings
。
AmCharts.makeChart("...", {
// ...
panels: [{
//showCategoryAxis: false, //comment/remove this
// ...
}],
// ...
categoryAxesSettings: {
labelsEnabled: false //if you want to remove the axis labels but keep the balloon
},
// ...
});
Some helpful clarifications: 一些有用的说明:
categoryAxis
doesn't do anything at the top level of the stock chart and all stock charts has parseDates
enabled by default. categoryAxis
在股票图表的顶层不执行任何操作,并且默认情况下所有股票图表都启用了parseDates
。 categoryAxesSettings
is the equivalent in this case. 在这种情况下,
categoryAxesSettings
是等效的。
dateDateFormat
tells AmCharts how to parse your string-based dates in your dataProvider
. dateDateFormat
告诉AmCharts如何在dataProvider
解析基于字符串的日期。 Since you're using Date
objects, this doesn't do anything. 由于您使用的是
Date
对象,因此不会执行任何操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.