草庐IT

php - 单击 x 轴以获取向下钻取报告时，在 highchart 列向下钻取图表上触发单击事件

coder 2023-10-23 原文

我想深入分析 highcharts 中的柱形图。我有一个 3 级向下钻取，每个向下钻取至少有 20 个 x 轴标签。现在向下钻取正在为列单击工作。我想在 x 轴点击上做同样的事情。

根据我的研究，我发现 this probable solution .单击 x 轴标签可在此处查看我想要实现的目标。

我用来实现这个功能的函数

function(chart) {

   //console.log(chart.xAxis[0].ticks[0]);
   $.each(chart.xAxis[0].ticks, function(i, tick) {
       tick.label.on('click', function() {
           var drilldown = chart.series[0].data[i].drilldown;
           if (drilldown) { // drill down
               chart.setTitle({
                   text: drilldown.name
               });
               setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level , drilldown.ytitle);

           } else { // restore
               setChart(name, categories, data, null, level , 'Total Agent score');
               chart.setTitle({text: "Agent Performance Drill Down Report"});

               chart.setTitle(undefined, { text: 'Click the Columns to view Drill Down Reports.' });
           }
       });
   });

}

问题:它适用于大多数 x 标签，但不是全部。这个可以看@this fiddle标签向下钻取不适用于所有标签的所有 3 个级别。

此外，这里是 post I made on highchart forum供引用

最佳答案

您在加载图表时添加处理程序，此时一些轴标签不会出现，因此这些标签不会响应点击事件

作为快速(读脏)修复，您可以将用于加载的相同处理程序添加到重绘，因此创建的新标签将绑定(bind)到它。

您可以将相同的功能绑定(bind)到重绘(这发生在 x 轴标签也更改时，您也可以用适合需要的不太频繁的事件替换)事件，所以每次重绘图表时您都取消绑定(bind)(因为我不确定 highchart 中标签的生命周期，如果现有标签被重新用于新的向下钻取图表，删除它会更安全)任何现有的点击处理程序如下每个刻度

 $(tick.label.element).unbind('click');

然后添加点击处理程序

var bindAxisClick = function() {
    $.each(this.xAxis[0].ticks, function(i, tick) {
        $(tick.label.element).unbind('click');
        $(tick.label.element).click(function() {
            var drilldown = chart.series[0].data[i].drilldown;
            if (drilldown) { // drill down
                chart.setTitle({
                    text: drilldown.name
                });
                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level, drilldown.ytitle);

            } else { // restore
                setChart(name, categories, data, null, level, 'Total score');
                chart.setTitle({
                    text: "Drill Down Report"
                });

                chart.setTitle(undefined, {
                    text: 'Click the Columns to view Drill Down Reports.'
                });
            }
        });
    });
};

修改图表选项以添加重绘和加载处理程序

chart :{
    ...
    events: {
            redraw: bindAxisClick ,
            load:bindAxisClick 
    },
    ...
 }

Dril down from x-axis labels @ jsFiddle

关于php - 单击 x 轴以获取向下钻取报告时，在 highchart 列向下钻取图表上触发单击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12494560/

取报取向drilldownchartsectionphpjavascriptmysqlchartshighcharts

有关php - 单击 x 轴以获取向下钻取报告时，在 highchart 列向下钻取图表上触发单击事件的更多相关文章

  1. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  2. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  3. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  4. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  5. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  6. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  7. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问

  8. ruby - 在没有数据库的情况下伪造一个事件记录模型 - 2

    我觉得我错过了什么。我正在编写一个ruby​​gem，它允许与事件记录进行交互，作为其主要功能的附加功能。在为其编写测试用例时，我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例，它不需要与数据库的任何连接，可以有关系，所有这些东西，但不需要我在数据库中设置表，那就太棒了。我对测试还很陌生，在Rails测试之外我也很陌生，但似乎我应该能够相当轻松地完成类似的事情，但我什么也没找到。谁能告诉我我错过了什么？我看过工厂、制造商、固定装置，所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem？ 最佳答案

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby-on-rails - 在事件记录库中添加某些方法的首选方法是什么？ - 2

    我想创建一个模块，为从事件记录库继承的类提供一些通用方法。以下是我们可以实现的两种方式。1)moduleCommentabledefself.extended(base)base.class_evaldoincludeInstanceMethodsextendClassMethodsendendmoduleClassMethodsdeftest_commentable_classmethodputs'testclassmethod'endendmoduleInstanceMethodsdeftest_commentable_instance_methodputs'testinstanc

随机推荐