程序员经验分享-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 .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正

  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试

  • 在 javascript 中访问 ajax POST 响应

    我正在从 javascript 函数发出 ajax POST 请求 function UpdateMetrics ajax type POST url MyHandler ashx Param1 value1 data contentTyp

  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel

  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它

  • 如何获取传单标记簇中点击事件的图块？

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map

  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一

  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无

  • 比较表中的行以了解字段之间的差异

    我有一个包含 20 多列的表 客户端 其中大部分是历史数据 就像是 id clientID field1 field2 etc updateDate 如果我的数据如下所示 10 12 A A 2009 03 01 11 12 A B 200

  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数

  • 如何设置在浏览器的新选项卡（_blank）中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa

  • 限制 jQuery id 字符串吗？

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH

  • 检测 WebGL 支持的正确方法？

    我正在尝试跨多个浏览器检测 WebGL 支持 并且遇到了以下情况 当前版本的 Firefox 似乎使用以下检查来报告积极支持 即使访问者的视频卡被列入黑名单和 或 WebGL 被禁用 if window WebGLRenderingCont

  • 如何设置视频文件的预览，从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video

  • jqGrid - 使所有列不可排序？

    除了添加之外 有没有办法使网格上的所有列都不可排序sortable false到每一列 我知道您可以在网格级别设置全局选项 但不知道是否可以在 colModel 级别执行此操作 您可以使用 colmodel 模板来实现此目的 cmTempl

  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl

  • 简单的 jQuery（scrollTo 和 animate）在 IE 中不起作用

    我刚刚注意到一些简单的 jQuery 无法在移动版 IE9 和 IE10 上运行 我有一些版权链接和简单的滑动接触形式 它使用animate 我还结合使用scrollTo 插件和jQuery 我尝试了不同的版本 仍然没有解决 也许我错过了一

  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func

  • 使用单击事件调用“trigger”方法时的复选框值

    如何在点击事件中获取正确的当前值以通过触发器调用 Html

  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 如何在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

热门标签