基于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的解决方案,问题已修复,正确渲染效果如下:
复现代码
# 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
相关产品推荐
相关产品推荐

