【问题标题】:Google Charts - is content drill-down in a chart possible?Google Charts - 是否可以在图表中向下钻取内容?
【发布时间】:2012-08-19 22:39:11
【问题描述】:

HighCharts 有一个非常好的向下钻取功能:http://www.highcharts.com/demo/column-drilldown - 但我想知道它是否可以在 google 图表可视化 API 中使用?据我所知,这是不可能的 - 但让我描述一下我的想法:

鼠标悬停时,会出现一个小弹出窗口,其中包含有关数据的其他信息。是否可以在其中放置链接?

因为我们在图表上有这些鼠标悬停事件,也许可以添加一个“点击”事件,我们可以用它做任何我们想做的事情?在这种情况下,我要么只是单击将用户发送到另一个 URL,要么可能强制图表进入一个新的图表动画(基本上是在这个庄园中创建向下钻取)。

我对 jQuery 不太熟悉,所以在这里我会很感激一些专业知识。谢谢!

【问题讨论】:

    标签: jquery google-visualization


    【解决方案1】:

    是的,这是可能的。尽管没有直接的方法可以做到这一点。

    我也在寻找这个,我想出了一个办法。

    您必须使用 PHP(或任何其他后端语言)准备 JSON 字符串。 PHP 应该递归地与数据库对话,并为每个明细图生成所需的 Javascript 文字语法,并将其嵌入 JSON 格式。 JSON 字符串准备好后,将 JSON 字符串复制粘贴到您的 HTML 脚本标记中。添加单击事件处理程序以切换到适当的 Javascript 文字。一旦 Datatable 准备就绪,调用 chart.draw()。

    你可以看看this。链接到repository

    【讨论】:

    • 很棒的实现
    【解决方案2】:

    我也一直在研究这个问题,根据我的发现,我认为你不能从他们的“仪表板”中做到这一点,但我认为你可以通过图表上的控件或事件来做到这一点.

    以下是在数据视图上使用“组”功能的示例,因此您可以在图表上的单击事件或控件的单击事件上使用它,然后重新绘制图表。 http://code.google.com/apis/ajax/playground/?type=visualization#group

    那么诀窍就是跟踪哪些过滤器当前处于活动状态以及诸如此类的事情。 如果这很容易集成,甚至能够查询数据集/视图(如http://code.google.com/apis/ajax/playground/?type=visualization#using_the_query_language),那就太好了

    如果您/其他人知道另一种方法,我很想听听。

    【讨论】:

      【解决方案3】:

      您可以在此处解释的 Google 图表中使用事件处理: https://developers.google.com/chart/interactive/docs/dev/events

      诀窍是使用图表的“选择”事件并在处理程序中编写代码。

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      
      chart.draw(data, options);
      
      google.visualization.events.addListener(chart,'select',selectHandler);
      
      function selectHandler()
      {
        //your code here
      
      }
      

      您可以在此处查看示例实现:https://jsfiddle.net/Abhishek1191/zggv80jo/

      这里我创建了一个组合图,点击在线任何数据点,你会看到在原始图表下方添加了一个饼图

      【讨论】:

      • 如何存储调用数据库的参数,例如我想捕获一个ID以生成新图形,如果我使用处理程序我只能获取切片文本值,是否有在每个切片中存储 id 或其他元数据的方法?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-06-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多