如何删除热图中的零值?

时间:2018-02-08 16:53:07

标签: highcharts

我使用highcharts构建热图,在弄清楚如何输入数据后,我对可能的配置元素数量感到不知所措。

我希望在没有匹配项时删除号码0的其中一个元素:

enter image description here

我该怎么做?

热图的简化(但功能)版本如下(如果运行它有问题,JSFiddle is available as well)。 0是我想要摆脱的。

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>

如果帖子似乎“不显示寻找解决方案的努力”,我很抱歉,但我浏览了API文档并且它只是,嗯,压倒一切

编辑:我找到了边框的解决方案(borderWidth: 1),所以我将问题限制为移除0

1 个答案:

答案 0 :(得分:1)

检查plotOptions.series.dataLabels.format并仅返回非零值:

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

      }

    }
  },

Fiddle演示