javascript - Amcharts multiple tooltips (ballon) on one chart in compare mode
问题描述
I have 4 stock graphs that I want to compare. When I tried to set a ballon
properties for them I always get some redundant one.
My first idea was to specify only one StockGraph
But I get one extra object.
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
}],
Then I decided to remove ballonText
property. But still this extra object exist.
"stockGraphs": [
{
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
//"balloonText": "A-[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
}
]
Then I decided to describe logic for every graph, but this only increased number of my of my objects.
"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>"
}
}),
I tried to follow examples fros the official website but didn't find relevant one.
解决方案
第一个屏幕截图中的额外气球来自您的第一个dataSet
对象。第一个dataSet
默认可见,因此不需要compared
设置为 true;将其设置为 true 将从第一个开始复制气球(如果启用,dataSet
您可以在图例中看到第一个重复自身)。dataSet
您可以通过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"
}
}),
推荐阅读
- c - 访问其并集中的结构的字段
- regex - Vim 正则表达式匹配前瞻和后缀而不破坏前瞻行为
- python - 查找并写入列中的下一个空白单元格
- c++ - 如何构造元组向量并像对一样对它们进行排序?
- nginx - Nginx image_filter resize 丢失元数据
- tfs - TFS 从 Main 创建分支 - 选定的变更集
- macos - VS 2017 + Unity + Mac OS high sierra (10.13.4) 符号链接和别名不起作用
- javascript - 在 Gatsby 的 404 页面上显示 URL
- jquery - JQuery DataTable Export Excel 无法将内置样式应用于空单元格
- sql - SQL 中的分组和排序