You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

基于Highcharter的Highmap叠加饼图渲染异常问题求助

Highmap叠加饼图异常排查与解决

问题现象

基于JSfiddle示例创建带叠加饼图的Highmap,通过events = list(load = JS())结构调用示例中的JS代码后,出现以下异常:

  • 仅显示单个饼图,未按预期为数据系列中每个非缺失点生成对应饼图;
  • 饼图固定渲染在地图中心,其提示框和数据对应数据系列的最后一个点(SE,瑞典),且无论data中最后一个国家的id如何变化,饼图位置始终不变。

问题排查更新

感谢Felix Jassler的提示,实际所有饼图都已绘制,但全部叠加在同一位置,启用饼图标签后可直观发现这一点。同时发现Highcharts社区中有Vue.js用户遇到完全相同的问题,解决方案为升级到Highcharts v10.2版本。当前使用的是Highcharter v9.4最新版,已在GitHub提交相关issue。

最终解决

感谢jedrzerjuta的解决方案,问题已修复,正确渲染效果如下:
使用Highcharter 10.2.0正确渲染的叠加饼图

复现代码

# Required
library(tidyverse)
library(highcharter)

# Create data
data <- tibble(
  id = c(
    "PL",
    "NO",
    "DE",
    "BY",
    "FR",
    "CZ",
    "SE"
  ),
  successes = c(
    15,
    20,
    10,
    10,
    1,
    20,
    20
  ),
  failures = c(
    3,
    2,
    10,
    15,
    2,
    20,
    8
    
  )
)
data$value <- data$successes-data$failures

# Plot
hcmap("custom/world-highres",
      data = data,
      joinBy = c("iso-a2", "id"),
      keys =c('id', 'successes', 'failures', 'value')
)%>%
  hc_colorAxis(
    dataClasses=list(
      list(
        from = -15,
        to = -1,
        color = '#faa',
        name = 'Successes'
      ),
      list(
        from = 0,
        to = 0,
        color = '#ddd',
        name = 'Neutral'
      ),
      list(
        from = 1,
        to = 18,
        color = '#adf',
        name = 'Neutral'
      )
    )
  )%>%
  hc_chart(events = list(load = JS("function() {
  var chart = this;
  chart.series[0].points.forEach(country => {
  if (!country.isNull) {
    chart.addSeries({
      type: 'pie',
      name: country.id,
      zIndex: 4,
      size: 40,
      dataLabels: {
        enabled: false
      },
      onPoint: {
        id: country.id
      },
      states: {
        inactive: {
          enabled: true
        }
      },
      data: [{
        name: 'Successes',
        y: country.successes,
        color: '#adf'
      }, {
        name: 'Failures',
        y: country.failures,
        color: '#faa'
      }]
    }, false);
  }
        }
        );
  chart.redraw();
}
"
  )
  )
  )

内容的提问来源于stack exchange,提问作者tibblah

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.26 03:33:25