【问题标题】:vue-highcharts dynamic master detail chart examplevue-highcharts 动态主明细图示例
【发布时间】:2019-10-30 11:43:19
【问题描述】:

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

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

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

我看到之前在 HighCharts 论坛的后续帖子中曾要求类似的内容(也许我误解了),但提供的最终示例被承认不是“良好实践”代码。

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

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

【问题讨论】:

    标签: vue.js highcharts


    【解决方案1】:

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

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

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

    亲切的问候!

    【讨论】:

    • 再次感谢@daniel_s。这是一个很大的帮助,让我找到了解决方案!
    猜你喜欢
    • 1970-01-01
    • 2018-01-16
    • 1970-01-01
    • 1970-01-01
    • 2013-06-28
    • 2022-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多