仅按可见系列过滤 Highcharts 的图例

2023-11-25

我们正在使用 Highcharts,并有一些复杂的图表,图表上大约有 75 个系列。 该系列并未在整个图表中使用,而仅在三个月范围内使用。因此,我们每年大约有 15 个系列,整个图表涵盖五年(大约 15*5 = 75 个系列)。但是 Highcharts 在其图例中显示所有 75 个图表。目标是将图例最小化为仅可见系列。我们能够确定 JS 代码中的相关系列,并且我们尝试切换相关系列的“showInLegend”标志,例如

chart.series[24].options.showInLegend = false

但没有效果。我们尝试使用重绘图表

chart.redraw() 

但这没有任何作用……传说保持不变。

所以问题是:

  • 是否可以根据更新的 showInLegend 选项重绘图例?
  • Highcharts 中是否有机制可以根据可见系列动态更新图例?

那么只需设置showInLegend并没有解决问题,还有一些钩子需要处理

请参阅 Halvor Strand 的回答以获取更新的方法


老伎俩但仍然有效

To Add

item.options.showInLegend = true;
chart.legend.renderItem(item);
chart.legend.render();

去除

item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();

其中,item 可以是一个点或一系列

var item = chart.series[1];

动态添加删除图例 | Highchart 和 Highstock @ jsFiddle

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

仅按可见系列过滤 Highcharts 的图例 的相关文章

  • 单击 hPlot 图表中闪亮的数据点时打印组名称

    我有一个闪亮的应用程序 它使用 rCharts 中的 highcharts 库显示一些图表 在某些情况下 我在单个图表上有多个图表 这些图表是使用 hPlot 中的组选项创建的 我希望在单击图表时打印单个数据点的所有参数 x y 和组值 我
  • 设置 Wpf 饼图样式

    这是我的饼图 xaml
  • Highcharts 问题 - 在可缩放图表中显示标签

    我有一个缩放柱形图 xAxis 中有 200 多个类别 因此 当它处于初始状态 比例1 1 时 所有这些家伙都显示在X轴下方 即使我将它们垂直放置 也无法读取任何内容 我需要缩放图表以使标签可见 Here s screenshot of t
  • 如何纠正 Highcharts 中的鼠标事件

    我正在尝试绘制 xy 线 其中 y 轴反转 并且我得到了图 但是mouse event我无法纠正它 它显示反向事件 我想自动找到轴的最小值和混合 如何做到这一点 以及如何将 x 轴置于顶部 这是我的代码 JS function var ch
  • Highcharts-more 的替代品

    As per npm https www npmjs com package highcharts morehighcharts more js 已弃用 我们只需要从 highcharts 文件夹中导入相应的模块即可 但是当我尝试删除 hi
  • 突出显示 extjs4 折线图的一部分

    在 extjs 4 1 1a 中 下面的代码是折线图的工作示例 现在我需要在给定的最小和最大时间戳上突出显示该图表的一部分 xtype chart store ChartData height 100 width 100 legend po
  • 使用 MVC3 根据 Highchart 条形图中的值更改条形颜色

    我正在使用 Dotnet Highchart 和 MVC3 我目前正在使用一个如下所示的图表 我正在尝试修改我的代码 以便我可以根据条形的数量更改条形的颜色 我还想知道如何删除按钮 Snittbetyg 正如您在图像上看到的那样 这是我的代
  • 具有最小刻度的图表的漂亮标签算法

    我需要手动计算图表的刻度标签和刻度范围 我知道漂亮刻度的 标准 算法 参见 我也知道这个Java实现 http erison blogspot nl 2011 07 algorithm for optimal scaling on char
  • 如何在使用类型分散时将箭头添加到行尾

    如何在 y 不等于 0 且系列类型以线宽 2 分散的情况下正确地将箭头添加到行的每一端 在这里我可以看到箭头已添加但未正确添加 请看这个 部分工作小提琴 http jsfiddle net vnYCX 这是我的 JS 最初的原型是由 sta
  • NVD3 - 配置轴上的刻度

    我有一个 nvd3 折线图 它显示时间序列 但无法在 x 轴右侧获取刻度 对于较长的时间跨度 它会按预期工作 但对于较短的时间跨度 此处 12 31 05 至 01 01 06 多个刻度显示相同的日期 请看一下JSFiddle 上此图表的代
  • VBScript for Excel:如何选择源数据 (.SetSourceData)?

    我已经在谷歌和这里搜索了这个问题的答案 但没有成功 如果之前有人问过 那么我道歉 我正在尝试使用 VBScript 自动执行一些管理任务 此特定脚本的目的是从文本文件 包含文本和数字列 中获取一些使用情况统计信息 并根据数据制作折线图 创建
  • ionic 2 google 图表未捕获类型错误:(void 0) 不是函数

    error 我想添加谷歌图表并按照这个https www npmjs com package angular2 google chart https www npmjs com package angular2 google chart 但
  • 如何在 Chart.js 中从最高到最低对数据进行排序

    我在如何使用 Chart js 对数据从高到低进行排序时遇到一些问题 我使用 Laravel 并使用 Chart js 来显示我的数据 但是我不知道如何进行操作以将 Chart js 中的最高值排序为最低值 数据 My code var c
  • 您会为 Linux 推荐哪种甘特图/项目管理工具? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我需要一个可在 Linux 中运行并具有甘特图的项目管理工具 它不一定是免费的 只是不贵 我不在乎它如何存储我提供的信息 只要我可以访问它即可 我一定
  • 如何将 C3 图表添加到 Angular 2+ 项目

    我搜索了很多有关 Angular2 图表包的信息 但没有 C3 js 的名称 直到我在下面的链接中找到了 C3 js 图表的示例 ani angular strapui com dashboard charts c3 chart http
  • 如何在 C# 中绘制蜡烛图 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 如何在 C 中绘制蜡烛图 有人有任何界面漂亮的例子吗 我用过MSChart http code msdn
  • 如何在Google可视化条形图中自定义工具提示(文本和格式)?

    我在用谷歌可视化条形图 http code google com apis visualization documentation gallery barchart html我想自定义或更改工具提示文本和格式单击栏时出现的 我已经阅读了文档
  • 可可豆荚图表未出现(Swift 4)

    我的图表未使用此条形图显示任何条形 我已成功导入图表可可豆荚 目前没有运行时错误 图表中唯一显示的是描述标签 import UIKit import Charts class ViewController UIViewController
  • 如何使用 dc.js 或 d3.js 为行图添加轴标签

    对于条形图和堆积图 我们可以使用 xAxisLabel X Axis Label and yAxisLabel Y Axis Label 为各个轴添加标签的函数 但 有没有办法为行图添加轴标签 尝试这样的事情 dc renderAll fu
  • 免费的 Flex SDK 中是否提供 Flex 图表?

    嗯嗯 图表似乎只能通过 Flex Builder 内置的 Flex SDK 获得 这是一个问题 因为我想使用 Flex 3 3 而 Flex Builder 附带了 3 2 Eclipse 也让我很恼火 我更喜欢使用不同的 IDE Flas

随机推荐