如何自定义amcharts的深度图?

How to customize depth Graph of amcharts?

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

这里是link我要自定义的原图

Link

请想想回答你问题的人,你说 "customize" 但这可能意味着什么,请尽可能具体,以便人们可以帮助你。

也就是说,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 属性是它们的 fillstroke 属性。虽然您可以 使用关键字、十六进制和 rgb 字符串,但在极少数情况下,这可能会丢失状态之间的颜色动画。所以如果没问题,尝试使用 am4core.Color class(am4core.color 是生成 Color 实例的便捷方法,请注意 upper/lower例)。

要调整绘图区域的颜色,there is a default plotContainer property on XYCharts,您可以将 fill 分配给它的第一个 child 的 background 属性,例如:

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

对于交替颜色,请参阅我们的指南"Alternating axis fills"

要翻转轴,只需交换 x/y 轴,即在您链接到的原始演示中,我已将它们更改为变量 xAxisyAxis valueAxis 在 x 轴上,categoryAxis 在 y 轴上(将 {categoryX} 的实例更改为 {categoryY},将 {valueX} 的实例更改为 {valueY},说到如果您想要自定义标签和工具提示的文本,您可以了解 formatting strings in v4). This will stand the chart up so it's from bottom->up, left aligned. If you want the chart to be anchored to the right, set the x axis renderer's inversed propertytrue:

valueAxis.renderer.inversed = true;

这是您的演示的分支,结合了上述大部分内容:

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