问题描述
我试图显示六边形或八边形形状,如雷达系列轴,以防我只有一两个数据项。现在它是这样渲染的。
以下是我的代码片段。我看过雷达图的适配器。到目前为止,没有发现任何有用的东西。 https://www.amcharts.com/docs/v4/reference/radarchart/#Adapters
调试后发现series.pixelHeight为0,各位大佬能指点一下吗?或者给我指路?
const chart = am4core.create('al-radial-chart',am4charts.RadarChart)
chart.logo.disabled = true
chart.data = data
chart.radius = am4core.percent(70)
//* Create axes */
const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis())
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis())
// Fields
categoryAxis.datafields.category = 'title'
valueAxis.title.fontWeight = 'bold'
valueAxis.renderer.gridType = 'polygons'
// Labels
valueAxis.renderer.labels.template.disabled = true
categoryAxis.renderer.labels.template.fontSize = 12
categoryAxis.renderer.labels.template.fill = am4core.color(colors.text)
// Axes
categoryAxis.renderer.grid.template.strokeWidth = 2
categoryAxis.renderer.grid.template.strokeOpacity = 0.99
categoryAxis.renderer.grid.template.fillOpacity = 0.05
categoryAxis.renderer.labels.template.html = `
<div style="width: ${
window.innerWidth < 1000 ? 80 : window.innerWidth < 1500 ? 120 : 150
}px; overflow: hidden; white-space: Nowrap; text-overflow: ellipsis; text-align: center;">{category}</div>
<div style="text-align: center; font-weight: bold">{score.formatNumber("#,###.0")}</div>`
categoryAxis.renderer.labels.template.tooltipText = `[bold]{title}[/]\n score is [bold]{score.formatNumber("#,###.0")}[/]`
categoryAxis.tooltip.getFillFromObject = false
categoryAxis.tooltip.background.fill = am4core.color(colors.turq)
categoryAxis.tooltip.background.stroke = am4core.color(colors.turq)
categoryAxis.renderer.grid.template.fill = am4core.color(colors.gridFill)
categoryAxis.renderer.grid.template.stroke = am4core.color(colors.lines)
valueAxis.renderer.grid.template.strokeWidth = 2
valueAxis.renderer.grid.template.strokeOpacity = 0.99
valueAxis.renderer.grid.template.fillOpacity = 0.05
valueAxis.renderer.grid.template.fill = am4core.color(colors.gridFill)
valueAxis.renderer.grid.template.stroke = am4core.color(colors.lines)
valueAxis.zIndex = 1
categoryAxis.zIndex = 2
/* Create and configure series */
const series = chart.series.push(new am4charts.RadarSeries())
// series.zIndex = 1
series.datafields.valueY = 'score'
series.datafields.categoryX = 'title'
series.strokeWidth = 2
series.stroke = am4core.color(colors.turq)
series.fillOpacity = 0.4
series.sequencedInterpolation = true
series.sequencedInterpolationDelay = 100
解决方法
我创建了将 valueAxis 值设置为零并具有不同标题的虚拟数据。已使用 categoryAxis htmlOutput
适配器隐藏这些标签。因为我的值为零图表正确呈现。将很快发布此问题的代码解决方案。