如何自定义弹药深度图？

Question

我正在尝试自定义深度图 amchart ，但我无法理解。它是如何工作的，如何将其样式设置为下面给出的图像？

这是我要自定义的原始图的链接

Link

Answer 1

请考虑回答您问题的人，您说“自定义”，但这可能意味着任何事情，请尽可能具体，以便人们可以为您提供帮助。

也就是说，关于amCharts的指南和演示相当全面，并且我们仍在此基础上进行开发，因此欢迎提出建议，尤其是在某些必不可少的东西感觉缺失的情况下。

如果要自定义图表的颜色，可以使用CSS来更改整个图表的背景，就像在此demo中所做的那样：

#chartdiv {
  background-color:#121212;
}

如果您对此感兴趣，它还将显示如何禁用网格线：

axis.renderer.grid.template.disabled = true;

You can disable other axis elements like their labels similarly (this link is part of a larger guide on Axes in general)。

如果您要自定义颜色，请先使用refer to our guide on colors，因为您将使用JavaScript为SVG（而非CSS）着色。通常，通过其应用颜色的SVG的属性是它们的fill和stroke属性。虽然您可以 使用关键字，十六进制和rgb字符串，但在极少数情况下，这可能会使状态之间的动画效果消失。因此，如果这不是问题，请尝试使用am4core.Color类（am4core.color是生成Color实例的便捷方法，请注意大小写的区别）。

要调整绘图区域there is a default plotContainer property on XYCharts的颜色，可以将fill分配给其第一个孩子的background属性，例如：

chart.plotContainer.children.getIndex(0).background.fill = am4core.color({ r: 17, g: 27, b: 54 }).brighten(0.2);

有关其他颜色，请参见我们的指南"Alternating axis fills"。

要翻转轴，只需交换x / y轴，即在链接到的原始演示中，不是将变量xAxis和yAxis更改为{{1}在x轴上}，在y轴上valueAxis（将categoryAxis的实例更改为{categoryX}，将{categoryY}的实例更改为{valueX}，如果您要自定义标签和工具提示的文本，您可以了解formatting strings in v4）。这将使图表向上，因此从下至上，左对齐。如果要将图表锚定在右侧，请将x axis renderer's inversed property设置为{valueY}：

true

以下是您的演示的一个分支，其中包括上述大部分内容：

https://codepen.io/team/amcharts/pen/9801ece19a15b7f3c72c5b6af501bcb9