如何在Flutter应用中实现Highchart drill down下钻功能

该需求可直接通过官方维护的highcharts_flutter库实现，具体实现建议如下：

前置准备 #

• 引入官方维护的highcharts_flutter依赖，最新稳定版已内置drilldown模块，无需额外引入扩展资源

核心实现步骤 #

• 提前配置两级数据集的关联关系：基础层每个数据项的drilldown属性值，必须和对应下钻层级series的id属性完全匹配（大小写敏感）
• 在图表配置项中开启drilldown能力，基础代码示例如下：

HighchartsChart(
  options: HighchartsOptions(
    chart: ChartOptions(type: 'column'),
    title: TitleOptions(text: '品类销售统计'),
    xAxis: XAxisOptions(type: 'category'),
    // 下钻核心配置
    drilldown: DrilldownOptions(
      activeAxisLabelStyle: TextStyleOptions(color: '#2385bb'),
      activeDataLabelStyle: TextStyleOptions(color: '#2385bb'),
      // 此处传入所有下钻层级的数据集
      series: drilldownSeries,
    ),
    // 基础层数据集
    series: baseSeries,
  ),
)

• 若需要实现多级下钻，仅需要给下钻层的数据项也配置对应drilldown属性，同时把更深层级的数据集加入到drilldown.series数组中即可，逻辑和二级下钻完全一致
• 如需自定义下钻/返回的附加逻辑，可监听drilldown、drillup事件实现对应业务处理

常见问题排查 #

• 点击无下钻效果：优先检查基础层数据项的drilldown值和下钻层series的id是否完全匹配，是否存在拼写错误或大小写差异
• 下钻后样式异常：确认drilldown配置的自定义样式未和全局series样式冲突
• 大数据量下钻卡顿：可按需开启下钻数据懒加载，在点击对应分类时再异步请求下钻数据插入到drilldown.series中，再触发下钻动作即可

内容的提问来源于stack exchange，提问作者Kamal Sanghavi