jquery - 如何自定义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 分配给它的第一个 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 轴，即在您链接到的原始演示中，我已经更改了变量 xAxis 和 yAxis它们为 x 轴上的 valueAxis 和 y 轴上的 categoryAxis(将 {categoryX} 的实例更改为 {categoryY} code> 和 {valueX} 到 {valueY}，如果你想自定义标签和工具提示的文本，你可以了解 formatting strings in v4 )。这将使图表竖立起来，因此它是自下而上的，左对齐。如果您希望图表固定在右侧，请设置 x axis renderer's inversed property为 true:

valueAxis.renderer.inversed = true;

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

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