如何在水平轴值下方边距/填充chartCursor答案

【问题标题】：How to margin/pad chartCursor below horizontal axis values如何在水平轴值下方边距/填充chartCursor
【发布时间】：2017-02-14 11:42:17
【问题描述】：

我正在尝试为我的光标标签（日期）添加一些边距，因为它们略微透明并且看起来不太好重叠。所以它很难解释，所以我附上了一张图片给你看：

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

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

这是我目前对 chartCursor 的了解：

"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,
}

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

【问题讨论】：

标签： javascript amcharts

【解决方案1】：

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

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

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

Demo

【讨论】：