如何自定义amcharts的深度图?
How to customize depth Graph of amcharts?
我正在尝试自定义深度图 amchart 但我无法理解它。它是如何工作的如何将其设置为下面给出的图像样式?
这里是link我要自定义的原图
请想想回答你问题的人,你说 "customize" 但这可能意味着什么,请尽可能具体,以便人们可以帮助你。
也就是说,amCharts 上的指南和演示相当全面,我们仍在继续构建它们,因此欢迎提出建议,尤其是在感觉缺少某些重要内容的情况下。
如果您想要自定义图表的颜色,您可以使用 CSS 来更改整个图表的背景,就像 demo:
中所做的那样
#chartdiv {
background-color:#121212;
}
如果您对此感兴趣,它还展示了如何禁用网格线:
axis.renderer.grid.template.disabled = true;
如果您想自定义颜色,请先 refer to our guide on colors,因为您将使用 JavaScript 为 SVG 着色,而不是 CSS。通常用于应用颜色的 SVG 属性是它们的 fill
和 stroke
属性。虽然您可以 使用关键字、十六进制和 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 轴,即在您链接到的原始演示中,我已将它们更改为变量 xAxis
和 yAxis
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
property 到 true
:
valueAxis.renderer.inversed = true;
这是您的演示的分支,结合了上述大部分内容:
https://codepen.io/team/amcharts/pen/9801ece19a15b7f3c72c5b6af501bcb9
我正在尝试自定义深度图 amchart 但我无法理解它。它是如何工作的如何将其设置为下面给出的图像样式?
这里是link我要自定义的原图
请想想回答你问题的人,你说 "customize" 但这可能意味着什么,请尽可能具体,以便人们可以帮助你。
也就是说,amCharts 上的指南和演示相当全面,我们仍在继续构建它们,因此欢迎提出建议,尤其是在感觉缺少某些重要内容的情况下。
如果您想要自定义图表的颜色,您可以使用 CSS 来更改整个图表的背景,就像 demo:
中所做的那样#chartdiv {
background-color:#121212;
}
如果您对此感兴趣,它还展示了如何禁用网格线:
axis.renderer.grid.template.disabled = true;
如果您想自定义颜色,请先 refer to our guide on colors,因为您将使用 JavaScript 为 SVG 着色,而不是 CSS。通常用于应用颜色的 SVG 属性是它们的 fill
和 stroke
属性。虽然您可以 使用关键字、十六进制和 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 轴,即在您链接到的原始演示中,我已将它们更改为变量 xAxis
和 yAxis
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
property 到 true
:
valueAxis.renderer.inversed = true;
这是您的演示的分支,结合了上述大部分内容:
https://codepen.io/team/amcharts/pen/9801ece19a15b7f3c72c5b6af501bcb9