javascript - 如何将图表光标置于水平轴值下方

Question

我正在尝试为我的光标标签(日期)添加一些边距，因为它们稍微透明并且重叠看起来不太好。所以它很难解释，所以我添加了一张图片来向您展示:

因此，我尝试将带有框 [2014 年 3 月 11 日，星期二] 的标签向下推大约 30px。

查看文档，charCursor 没有官方边距或填充。 ，但是在其他地方吗？或者甚至是临时的 hacky 解决方案？

这是我目前的图表光标:

"chartCursor": {
    "enabled": true,
    "animationDuration": 0,
    "balloonPointerOrientation": "vertical",
    "bulletsEnabled": true,
    "categoryBalloonDateFormat": "MMM DD, YYYY \n\r EEEE",
    "cursorAlpha": 0.15,
    "cursorColor": "rgba(255,255,255,0.5)",
    "fullWidth": false,
    "graphBulletSize": 5,
    "leaveCursor": false,
    "tabIndex": 1,
    "valueBalloonsEnabled": true,
    "valueLineAlpha": 1,
    "valueLineBalloonEnabled": false,
}

我还需要知道如何用实心 block 和标签填充前 4 天(我的例子)，但这可能是一个单独的问题。

Answer 1

AmCharts API 中没有任何属性允许您定位图表光标的类别气球，但您可以使用 CSS 通过设置 .amcharts-balloon-bg-categoryAxis 样式来移动类别气球的 SVG 路径和气球文本 div。和.amcharts-balloon-div-categoryAxis CSS 类。例如:

.amcharts-balloon-bg-categoryAxis {
  transform: translateY(5vh);
}
.amcharts-balloon-div-categoryAxis {
  transform: translateY(5vh);
}

您需要设置 addClassNames 在图表配置中设置为 true 以使这些类可用。

Demo