如何 margin/pad chartCursor 低于水平轴值

Question

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

所以我试图将带有框 [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 天（我的示例），但这可能是一个单独的问题。

Answer 1

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

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

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

Demo

如何 margin/pad chartCursor 低于水平轴值

How to margin/pad chartCursor below horizontal axis values

javascript

amcharts