如何自定义amcharts的深度图？

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，我已将它们更改为x轴上的valueAxis和y轴上的categoryAxis（更改实例{categoryX}到{categoryY}和{valueX}到{valueY}，如果你想要自定义标签和工具提示的文字，你可以了解formatting strings in v4）。这将使图表站起来，因此它从底部向上，向左对齐。如果您希望图表固定在右侧，请将x axis renderer's inversed property设置为true：

valueAxis.renderer.inversed = true;

这是你的演示的一个分支，其中大部分结合在一起：

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