如何删除热图中的零值？ [英] How remove zero values in a heatmap?

问题描述

我使用highcharts来构建一个heatmap，并且在弄清楚如何放入数据之后，我对可能的配置元素数量感到不知所措。

其中一个元素我想在没有匹配时删除数字 0 ：

我该怎么做？

一个简化（但功能性）的版本热图如下（以防运行时出现问题，也可以使用 JSFiddle ）。 0 是我想摆脱的。

  Highcharts.chart（'container'，{chart：{type：'heatmap'，plotBorderWidth：1}，title：{text：null}，xAxis：{categories：['a'， 'b']，标题：attackers，}，yAxis：{categories：['x'，'y']，title：sentinels，}，colorAxis：{dataClasses：[{to：1，color：' #FFFFFF'}，{{from：1，to：10，color：'＃FFE4E1'}，{from：10，to：100，color：'＃FA8072'}，{from：100 to：1000，color： '＃FC1501'} {{from：1000，to：10000，color：'＃660000'}，{from：10000，to：100000，color：'＃330000'}，]}，legend：{align：'right '，layout：'vertical'，margin：0， verticalAlign：'top'，y：25，symbolHeight：10}，tooltip：{formatter：function（）{return'< b> + this.series.xAxis.categories [this.point.x] +'< / b个联系< br>< b> + this.point.value +'< / b> times< br>< b>'+ this.series.yAxis.categories [this.point.y] +'< / b>'; }}，series：[{name：'Connexion per ip'，// turboThreshold：5000，borderWidth：0，data：[[0,0,10]，[0,1,0]，[1,0,0 ]，[1，1，10]]，dataLabels：{enabled：true，color：'＃000000'}}]}）;  

 < script src =https://code.highcharts.com/modules/exporting.js>< / script><脚本src =https://code.highcharts.com/modules/heatmap.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0。 6 / highcharts.js>< / script>< div id =container>< / div>  

_{如果帖子显示不显示查找解决方案的努力，但我浏览了API文档并且它只是，好吧，压倒性的}

编辑：我找到了解决方案的边界（ borderWidth：1 ），所以我限制我的问题去除 0

解决方案

检查 plotOptions.series.dataLabels.format 并且只返回非零值：

  plotOptions：{
 series：{
 dataLabels：{
 formatter：function（）{
 if（this.point.value> 0）{
 return this.point.value 
} 
} 
 
} 
 
} 
}，
  

小提琴演示

I use highcharts to build a heatmap and after figuring out how to put my data in, I am overwhelmed with the number of possible configuration elements.

One of the elements I would like to remove the number 0 when there are no matches:

How can I do that?

A simplified (but functional) version of the heatmap is below (in case there are problems to run it, a JSFiddle is available as well). The 0 is what I want to get rid of.

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    plotBorderWidth: 1
  },
  title: {
    text: null
  },
  xAxis: {
    categories: ['a', 'b'],
    title: "attackers",
  },
  yAxis: {
    categories: ['x', 'y'],
    title: "sentinels",
  },
  colorAxis: {
    dataClasses: [{
      to: 1,
      color: '#FFFFFF'
    }, {
      from: 1,
      to: 10,
      color: '#FFE4E1'
    }, {
      from: 10,
      to: 100,
      color: '#FA8072'
    }, {
      from: 100,
      to: 1000,
      color: '#FC1501'
    }, {
      from: 1000,
      to: 10000,
      color: '#660000'
    }, {
      from: 10000,
      to: 100000,
      color: '#330000'
    }, ]
  },
  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 10
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> contacted <br><b>' +
        this.point.value + '</b> times <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
    }
  },
  series: [{
    name: 'Connexion per ip',
    //turboThreshold: 5000,
    borderWidth: 0,
    data: [
      [0, 0, 10],
      [0, 1, 0],
      [1, 0, 0],
      [1, 1, 10]
    ],
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"></script>
<div id="container"></div>

_{I am sorry if the post seems "not to show effort of finding the solution" but I browsed the API documentation and it is just, well, overwhelming}

EDIT: I found the solution to the borders (borderWidth: 1) so I limit my question to the removal of the 0.

解决方案

Check plotOptions.series.dataLabels.format and only return values which are non zero:

  plotOptions: {
    series: {
      dataLabels: {
        formatter: function() {
          if (this.point.value > 0) {
            return this.point.value
          }
        }

      }

    }
  },

Fiddle demo

这篇关于如何删除热图中的零值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！