vue highcharts动态主细节图示例



我需要使用Vue在我的新站点中实现一个主细节图表对。该组件由两个主细节图组成,只要其中一个中的选择在另一个中进行相同的选择,它们就会链接。

我的要求使这比通常的示例稍微复杂一些,因此最好有一个基本但官方的主细节示例来使用,例如示例文档中存在的示例:

https://www.highcharts.com/demo/dynamic-master-detail

我看到之前在HighCharts论坛的以下帖子中也有类似的请求(也许我误解了(,但提供的最终示例被认为不是"良好实践"代码。

https://www.highcharts.com/forum/viewtopic.php?t=40436

我将继续使用其中的示例,尝试启动并运行一些东西,但不知道是否存在任何东西(使用官方包装(,HighCharts的好人很乐意作为这种图表类型的最佳实践Vue实现。

我建议将其作为一个新组件来实现,例如MasterDetailChart,它将把数据作为prop,并根据给定的数据生成两个图表。我使用Codesandbox平台准备了新的演示,所以请看一看。

目前,您可以使用该组件,需要做的一件事就是通过组件道具传递数据。

现场示例:https://codesandbox.io/s/highcharts-vue-demo-jnqr6

谨致问候!

最新更新