程序员经验分享-hwhale

Highcharts 中分组柱形图的深入分析

2024-02-08

我正在尝试对高图中的分组柱形图进行深入分析。我的图表在这里：

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category',
            categories: [
                          "2011-12",
                          "2012-13",
                          "2013-14",
                          "2014-15",
                          "2015-16"
                        ]
            
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [
                  {
                    "name": "First",
                    "data": [
                      40351.62,
                      51506.83,
                      68566.23,
                      80596.9228,
                      94329.31
                    ]
                  },
                  {
                    "name": "Second",
                    "data": [
                      40750.4963,
                      56205.181,
                      63776.2866,
                      74912.5923,
                      83801.83617
                    ]
                  },
                  {
                    "name": "Third",
                    "data": [
                      28589.0331305,
                      40716.9008376,
                      42050.10774,
                      54934.329763,
                      1811.2277
                    ]
                  },
                  {
                    "name": "Forth",
                    "data": [
                      38022.7637359,
                      52503.122283245,
                      59760.3037668,
                      71143.7222503,
                      27.60156
                    ]
                  }
                ]
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

分组柱形图 http://jsfiddle.net/6LXVQ/1185/

我想对图表中的每一列进行深入分析。但我不明白该怎么做？


这是一个很好的问题！

在您的系列数据中，您需要定义一个y值和相关的drilldown每个数据点的 id，例如：{ y: 40351.62, drilldown: 'test' }.

然后，您可以在其中设置项目drilldown扩展数据的属性。

此方法的优点在于您可以仅指定所需列的向下钻取（例如，仅针对一个系列）。

这是我为此示例修改的代码：

drilldown : {
    series: [{
        name: 'Test Drilldown',
        id: 'test',
        data: [
            [ 'data A', 24.13 ],
            [ 'data B', 17.2 ],
            [ 'data C', 8.11 ],
            [ 'data D', 5.33 ]
        ]
    }]
},
series: [
      {
        "name": "First",
        "data": [
          { y: 40351.62, drilldown: 'test' },
          51506.83,
          68566.23,
          80596.9228,
          94329.31
        ]
      },
      // ... other series
]

您可以在这里找到小提琴的更新版本：http://jsfiddle.net/brightmatrix/6LXVQ/1187/ http://jsfiddle.net/brightmatrix/6LXVQ/1187/

我希望这对您有帮助！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

highcharts

drilldown

Highcharts 中分组柱形图的深入分析 的相关文章

  • jquery 当前可见的第 n 个子级

    我可以像这样设置每 4 个 item div 的样式 jQuery item nth child 4n addClass fourth item 这工作得很好 但后来我隐藏了一些项目 显示了其他一些项目 并想重新做这个样式 但只对每第四个可

  • 选择 asp.net CheckBoxList 中的所有项目

    ASP NET 和 C 我想要一个带有 全选 项目的复选框列表 当这个特定项目是 已选择 所有其他都将被选择 也 当选择被删除时 这个项目 也将来自所有人 其他物品 选中 取消选中 任何其他项目只会有一个 对特定项目的影响 无论选择状态如何

  • 如果选中复选框则显示 div

    我正在尝试构建类似 WordPress 选项的东西 用于在创建文章时切换字段可见性 我所构建的依赖于 click函数使用相应的字段名称切换父项 我想知道如果选中该复选框 执行此操作的最佳方法是什么 因为如果您选中一个框并重新加载页面 因为它

  • JQuery UI：将长元素放在光标位置而不是元素的中间

    我有一些很长的可拖动元素 可以将它们放入背景表的所有单元格中 当我开始拖动此类元素并将其悬停在可放置容器 表格的单元格 上时 了解元素将被放置到何处的 热点 点是其自身的中间 不幸的是 我的元素的中间通常不可见 并且将元素放在正确的位置是没

  • 如何为 jQuery 插件设置私有变量？

    我想创建一个简单的插件 它使用元素的文本作为默认值 或者您可以在调用插件时设置此值 但是 如果我不设置该值 并为多个元素调用插件 则默认值会成倍增加 function fn reText function options var setti

  • 如何修复 IE6 上的不透明度

    如何修复 IE6 上的不透明度 此代码不适用于 IE6 filter alpha opacity 50 moz opacity 0 5 khtml opacity 0 5 opacity 0 5 还有这段代码 description ani

  • init 后用 JSON 填充 select2 不起作用

    我正在尝试使用 JSON 数组填充 select2 元素 但我无法得到它 我有下一个数组 data id Foo text Foo id Bar text Bar 我初始化 select2 如下 selectElement select2

  • 如何防止 iframe 中的链接在新选项卡中打开

    我为我制作的基于网络的操作系统制作了一个基于网络的小型网络浏览器 我注意到在某些网站中 它们有喜欢在新选项卡中打开的链接 有没有办法可以防止这种情况并在 iframe 中打开链接 这是我的整个浏览器的代码 以防万一

  • 简单 AJAX Get 请求“待处理”

    我正在尝试实现一个简单的 AJAX GET 请求 该请求告诉服务器删除数据库中的文档 虽然我从服务器得到文档已删除的确认 但 Chrome 检查器显示该请求处于 待处理 状态 最终导致服务器错误 我做错了什么 HTML div class

  • 如何使用 JavaScript 发布 ASP.NET MVC Ajax 表单而不是提交按钮

    我有一个使用创建的简单表单Ajax BeginForm Description br

  • JQGrid - 在编辑表单中显示附加列

    我有一个 JQGrid 表 有 30 多个列 我认为这些列的内联编辑对用户来说并不友好 所以我想在网格模式下显示几列 并仅当用户打开该行的编辑表单时显示所有列 这可能吗 在教程中找不到这个 先感谢您 如果你想show并且不要编辑列 然后使用

  • 如何设置 jQuery DataTables 中特定列的最大宽度

    如何设置一个特定列的最大宽度 所有其他列应自动调整大小 我已经尝试了下面的代码 但它不起作用 因为我认为没有 最大宽度 属性 table dataTable paging false info false searching false c

  • 根据复选框和数据元素隐藏/显示表格行

    我想隐藏表中的行 因为我选中了复选框并且该数据元素在表中不正确 另一个实验 我还可以使用数据元素进行排序并按下拉列表排序 查看 tr 标签 价格 名称 评级 吗 div class filter list div

  • 仅单击 div 内部

    我正在为一个小网站制作教程 我只想让教程气泡可点击 因此 当我们尝试单击气泡之外的某些内容时 什么也不会发生 换句话说 我希望我的 html 不可点击 而 tutorial bubble 可点击 尝试这个 jQuery function h

  • Jquery，取消绑定鼠标滚轮事件，然后在操作完成后重新绑定它？

    我已经为此苦苦挣扎了一段时间了 我正在使用此代码来监视鼠标滚轮 以便它可以用于使用我拥有的滑块滚动 但是 它有一个问题 即操作排队 因此如果你快速滚动鼠标滚轮 就像任何人通常会做的那样 它们就会堆积并导致错误行为 我知道如何用动画处理此类问

  • 创建后将事件处理程序添加到 jQuery UI 日期选择器

    我有以下场景 在我的母版页中我有 datepicker datepicker changeYear true changeMonth true dateFormat dd mm yy duration fast 这样 我分配 datepic

  • 如何调用 google 的 getBasicProfile() 来仅单击按钮即可登录 google？

    我在我的网站上使用谷歌登录

  • 如何更改自动完成中的结果过滤器？

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet

  • jQuery - 系列之外的 HighCharts 标签（条形图）

    function container highcharts chart type bar backgroundColor null width 360 title text null style display none subtitle

  • 使用 JQuery 根据下拉列表选择的值显示/隐藏控件

    我正在尝试使用 JQuery 根据下拉菜单的选定索引显示 隐藏 div 标签 但它不起作用 任何帮助将不胜感激 Thanks

随机推荐

  • 如何在pygame中从一种颜色淡入另一种颜色？

    我如何在 pygame 中从一种颜色淡入另一种颜色 我想慢慢地改变一个圆圈的颜色 从绿色到蓝色到紫色到粉色到红色到橙色到黄色到绿色 我该怎么做呢 目前 我正在使用 def colour switcher 0 0x2FD596 1 0x2FC

  • 自动附加支持行为未完全成功

    我有一个包含多个 C 项目的 Visual Studio 2010 解决方案 安装并启用了 Resharper 5 1 所有这些项目都以 NET Framework 4 为目标 该解决方案几个月来一直运行良好 但今天早上加载解决方案时我收到

  • ireport 4.0.1 中报表的动态宽度

    我在ireport4 0 1中设计了一个交叉表报表 由于交叉表 我不知道报告的宽度 是否有任何选项可以根据其包含的数据设置宽度 好吧 我的答案可能不是 jaspersoft 人员推荐的答案 但我要做的是在运行时计算所需的宽度 然后将值放入

  • 从 DataTemplate 上的按钮获取 ListBox 行对象

    我有一个ListBox with a DataTemplate 该模板有一个Button在上面 当 的时候Button单击我想对每行的对象执行一些逻辑 在本例中是一个名为WorkItemTypeMappings In theOnClick我

  • 是否可以检查您是否正在使用 Microsoft C 编译器构建 64 位版本？

    是否有为 64 位构建定义的简单预处理器宏 我想 WIN64可能是这样 但即使当我构建 32 位目标时 包含在 ifdef WIN64 endif被编译进去 这会引起问题 今天是星期五 我无法正常思考 但我确信我忽略了一些非常简单的事情 甚

  • 如何向rails4添加自定义动词（http请求方法）

    我想向 Rails 4 添加自定义 http VERB 这是我的路线 rb ring session gt calls ringing 我还将这段代码放入初始化程序中 w ring busy each do method ActionDis

  • CMake 排除子目录中的测试

    我有一个包含 libevent 库的 C 项目 项目结构 CMakeLists txt Makefile src my lib cpp test my lib test cpp lib libevent CMakeLists txt 当我构

  • 如何将线程异常传播回应用程序异常处理程序

    http msdn microsoft com en us magazine gg598924 aspx http msdn microsoft com en us magazine gg598924 aspx 为什么 WPF Dispat

  • 何时使用构建工具？

    一个初学者问题 请耐心等待 我只是想知道在什么情况下应该使用像 nant 或 msbuild 这样的构建工具 我正在开发一个中型应用程序 net 3 0 每个开发人员都在做他的工作并在他的机器上进行构建 检查他的代码更改到存储库中 全部完成

  • 对象未使用 JPA/JTA/JBOSS/CDI 持久化

    请帮助我理解为什么对象没有通过以下代码持久化 它抛出javax persistence TransactionRequiredException JBAS011469 需要事务来执行此操作 使用事务或扩展持久性上下文 public clas

  • 设置 3 个元素的高度，取最大值，跨多行

    我有一个 div 布局 全部向左浮动 列数为 3 这些层内部是长度不同的文本 因此层的高度不同 因此无法正确对齐 而且看起来也不太好 因为边框不身高匹配 我可以为所有 div 设置固定高度 但这会在某些行上留下巨大的空白 因此我编写了一些

  • Laravel：Redis 无法建立连接：[tcp://127.0.0.1:6379]

    我已经用 laravel 安装了 redis 添加了 predis predis 1 0 然后为了测试我添加了以下代码 public function showRedis id 1 user Redis get user profile i

  • Rails 4 和 Devise：Devise 不保存新信息（名字、姓氏、个人资料名称）

    我正在使用 Rails 4 和 Devise 我正在尝试在我的应用程序上发布的状态中显示用户的名字 我已经正确完成了我能想到的所有事情 添加用户模型后迁移数据库 并且数据库仍然没有保存我标题中列出的三个新字段 Devise 保存它附带的内容

  • kotlin，如何将 HashMap 放入 Parcelable 中

    在实现 Parcelable 的类中 它有一个 HashMap 成员 看到 Parcelable 有public final void readMap Map outVal ClassLoader loader 但找不到使用它的示例 如果通

  • 如何在不破坏皮肤的情况下向 MediaWiki 站点添加水平顶部菜单栏？

    我希望我的 MediaWiki 网站 除了侧边栏之外 或者代替侧边栏 在网站顶部有一个链接栏 在每个页面上都可见 要求 为了尽量减少以后的维护负担 我的要求是 无需修改核心 扩展或皮肤代码 我不想维护项目分支 理想情况下 特权用户应该能够通

  • WPF 可见性绑定到具有多个变量的布尔表达式

    我有两个布尔值 我想根据它们的值显示图像 如下所示

  • Java：将二进制字符串转换为十六进制字符串[重复]

    这个问题在这里已经有答案了 我需要将二进制字符串转换为十六进制字符串 但我有一个问题 我通过以下方法将二进制字符串转换为十六进制字符串 public static String binaryToHex String bin return L

  • Delphi - 按名称调用记录方法

    我为我的应用程序编写了一种脚本语言 我的目标是能够在脚本中发布来自 delphi 的任何类型 我使用 rtti 来自动执行此任务 对于任何实例类型 例如类 我使用以下代码从脚本查找并调用方法 var Info TRttiType Meth

  • WPF 用户控件数据绑定不起作用

    我正在创建一个简单的用户控件 将弹出窗口与文本视图相结合 这没什么疯狂的 当我首先在窗口中将其设置为全部样式时 它工作得很好 但是当我将其移到用户控件中以实际完成它时 它将不再正常工作 我将最小值和最大值传递给控件 然后它会自动创建一个数字

  • Highcharts 中分组柱形图的深入分析

    我正在尝试对高图中的分组柱形图进行深入分析 我的图表在这里 function Create the chart container highcharts chart type column title text Basic drilldow

热门标签