时间戳

首页 > 解决方案 > 海图 | 热图 | 更新数据时图例过滤器不起作用

javascript - 海图 | 热图 | 更新数据时图例过滤器不起作用

问题描述

在更新数据以及禁用一个或多个图例过滤器时，我对setData函数如何与一系列“ HEATMAP ”一起工作有疑问。

我根据数据表示的值使用 3 种颜色填充热图图表（效果很好），每种颜色都显示为图例中的一个项目：

options.colorAxis = {
      dataClasses: [
{
      color: GREEN,
      from: 0,
      to: 50,  
    },
    {
      color: ORANGE,
      from: 50,
      to: 100, 
    },
    {
      color: RED,
      from: 100,  
      to: 1e6,
    }]

    };

当我想用来自服务器的新数据更新图表时，我使用：

this.chart.series[0].setData(newData, true, false, false);

这也可以正常工作，除非通过单击图例项禁用了颜色。

问题是当数据更新时，所有被过滤器过滤掉的颜色都会重新出现在图表上（下图，第 3 部分） 。

然而，传说是好的（被禁用的仍然被禁用）。

你能帮我找到解决办法吗？谢谢你。

请在下面找到我解释的视觉描述：

在此处输入图像描述

标签： javascripthighchartsheatmap

解决方案

FWIW，这就是我解决问题的方法。

更新后立即使用

this.chart.series[0].setData(newData, true, false, false);

我刚刚添加了以下几行（以编程方式切换数据组可见性的两倍）：

const allItems = (<any>this.chart.legend).allItems as Array<any> ;

allItems.forEach( item => {
  item.setVisible();
  item.setVisible();
});

推荐阅读