Javascript Amcharts在比较模式下在一个图表上显示多个工具提示(气球)
我有4张股票图表要比较。当我试图为它们设置一个Javascript Amcharts在比较模式下在一个图表上显示多个工具提示(气球),javascript,amcharts,amstock,Javascript,Amcharts,Amstock,我有4张股票图表要比较。当我试图为它们设置一个ballon属性时,我总是得到一些多余的属性 我的第一个想法是只指定一个StockGraph,但我得到了一个额外的对象 let chart = window.AmCharts.makeChart("chartdiv", { "path": AmCharts_path, "type": "stock", "theme": "light", "dataSets": por
ballon
属性时,我总是得到一些多余的属性
我的第一个想法是只指定一个StockGraph
,但我得到了一个额外的对象
let chart = window.AmCharts.makeChart("chartdiv", {
"path": AmCharts_path,
"type": "stock",
"theme": "light",
"dataSets": portfolioData.map(function (port) {
return {
"title": port.name,
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": port.data,
"compared": true,
"categoryField": "date"
}
}),
"panels": [{
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [
{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "Smart Gloabal A-[[title]]:<b>[[value]]</b>",
}
]
}],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"listeners": [{
"event": "zoomed",
"method": this.calulateMetrics
}],
然后我决定为每个图描述逻辑,但这只会增加对象的数量
"stockGraphs": portfolioData.map(function (port, idx) {
return {
"id": "g"+(idx+1),
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "A-[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
}
}),
“stockGraphs”:portfolioData.map(函数(端口,idx){
返回{
“id”:“g”+(idx+1),
“valueField”:“value”,
“可比”:正确,
“比较字段”:“值”,
“文本”:“A-[[title]]:[[value]]”,
“CompareGraphBallodText:”B[[title]]:[[value]]
}
}),
我试图从官方网站上找到一些例子,但没有找到相关的例子。第一个屏幕截图中的额外气球来自第一个
数据集
对象。默认情况下,第一个数据集
可见,因此它不需要将比较
设置为true;将其设置为true将从第一个数据集
复制引出序号(如果启用,您可以在图例中看到第一个数据集
重复自身)。您可以通过稍微调整map
调用来解决此问题:
"dataSets": portfolioData.map(function (port, idx) {
return {
"title": port.name,
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": port.data,
"compared": (idx === 0 ? false : true), //don't compare the first dataSet
"categoryField": "date"
}
}),
"dataSets": portfolioData.map(function (port, idx) {
return {
"title": port.name,
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": port.data,
"compared": (idx === 0 ? false : true), //don't compare the first dataSet
"categoryField": "date"
}
}),