Amcharts - 一个和两个数据项的雷达图 (amcharts4)答案

【问题标题】：Amcharts - radar chart for one and two data items (amcharts4)Amcharts - 一个和两个数据项的雷达图 (amcharts4)
【发布时间】：2021-06-16 14:24:46
【问题描述】：

我试图显示六边形或八边形形状，如雷达系列轴，以防我只有一两个数据项。现在它是这样渲染的。

以下是我的代码 sn-p。我看过雷达图的适配器。到目前为止，没有发现任何有用的东西。 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

【问题讨论】：

标签： javascript amcharts amcharts4

【解决方案1】：

我创建了将 valueAxis 值设置为零并具有不同标题的虚拟数据。已使用 categoryAxis htmlOutput 适配器隐藏这些标签。因为我的值是正确呈现的零图表。稍后将发布此问题的代码解决方案。

【讨论】：