使用基于 Geojson 几何的地图的 Highcharts (Highcharts-Vue) 钻取无法显示答案

【问题标题】：Highcharts (Highcharts-Vue) Drilldown with Geojson Geometry Based Maps Fails To Display使用基于 Geojson 几何的地图的 Highcharts (Highcharts-Vue) 钻取无法显示
【发布时间】：2020-08-29 01:01:56
【问题描述】：

我已经使用 Highcharts-Vue 实现了 http://jsfiddle.net/maxsinev/h9x3kpn5/3/ 方法，但我的地图（使用 import stateMap from '@highcharts/map-collection/countries/us/us-all.geo.json' 语句从 Highcharts 集合加载）将所有状态形状都作为几何元素而不是路径。

另外，如果我从状态图功能加载系列数据，Highcharts 不会查看属性；我必须修改属性以包括 Drilldown = true 和 value = # 然后从我的 features.map() 调用中返回。

在这一点上，我不确定这是否是 Highcharts-Vue 包装器的问题，我正在加载的地图，或者是否有一些图表本身的设置会有所帮助。我还必须将 chartOptions.chart.map 设置为 stateMap（上面引用的示例没有这样做），否则没有地图显示。

【问题讨论】：

您能解释一下“将所有状态形状作为几何元素而不是路径”的意思吗？我不太明白你的问题，所以你能更详细地描述一下吗？在 support@highcharts.com 上讨论它可能会很方便，因为这个线程可能很复杂，不是吗？
如果我添加mounted() { console.log(this.options.series[0].data); }，对于链接的小提琴，每个元素都以 {drilldown: true, name: , path: , ... } 开头。路径是我不熟悉的一种格式，但似乎是地图坐标投影到屏幕上的平面坐标的简化表示。但是，当我加载我的地图时： import usMap from '@highcharts/map-collection/countries/us/us-all.geo.json';和 console.log(usMap)，我的元素有一个几何纬度/经度坐标而不是路径元素。

标签： dictionary highcharts drilldown

【解决方案1】：

TBH，我没有解决方案，但我想我知道为什么钻取功能不起作用。

我正在使用 Highcharts-Vue 包装器，它可以很好地使 Highcharts 在 Vue 生态系统中发挥出色，但不会暴露底层对象的函数调用。因此，例如，如果您想重绘地图，则必须通过 $refs 才能到达底层对象，然后调用 redraw 类似：

<highcharts :options="chartOptions" :constructor-type="'mapChart'" ref="chart" />

...

let myChart = this.$refs.chart.chart;

myChart.redraw();

我的预感是向下钻取事件处理程序也“埋”在底层对象中，因此如果想要连接线，需要在对象的 $refs 版本而不是 Highcharts-Vue 级别这样做.

顺便说一句，这可能是各种部分无法正常工作或无法按预期工作的原因：地图/图表/等。在 Highchart-Vue 层中都更加“静态”。必须预先做所有事情，例如导入所有地图，而不是动态加载它们。一旦mounted() 被触发，组件就不像文档和小提琴示例描述的那样反应。

话虽如此，这与 Path 与 Geometry 对象无关。希望这可以节省一些时间。

【讨论】：