The issue has been closed

热力图数据色阶显示问题 #5978

PaoPao-ovo posted onGitHub

当使用热力图时，在color映射的值一样时显示大面积空白 .encode('color',' z')

数据： { "x": 14, "y": 10, "z": 15}, { "x": 14, "y": 11, "z": 15}, { "x": 14, "y": 12, "z": 15}, { "x": 14, "y": 13, "z": 15}, { "x": 14, "y": 14, "z": 15}, { "x": 14, "y": 15, "z": 15}, { "x": 14, "y": 16, "z": 15}, { "x": 14, "y": 17, "z": 15}, { "x": 14, "y": 18, "z": 15}, { "x": 14, "y": 19, "z": 15}, { "x": 14, "y": 20, "z": 15},

方便提供一下完整的复现代码吗？

posted by pearmini over 1 year ago

显示效果如下： Snipaste_2023-12-26_08-19-27

posted by PaoPao-ovo over 1 year ago

方便提供一下完整的复现代码吗？

<script setup>
import { onMounted } from 'vue';
import { Chart } from '@antv/g2';
const data = [
  { "x": 10, "y": 10, "z": 15},
  { "x": 10, "y": 11, "z": 15},
  { "x": 10, "y": 12, "z": 15},
  { "x": 10, "y": 13, "z": 15},
  { "x": 10, "y": 14, "z": 15},
  { "x": 10, "y": 15, "z": 15},
  { "x": 10, "y": 16, "z": 15},
  { "x": 10, "y": 17, "z": 15},
  { "x": 10, "y": 18, "z": 15},
  { "x": 10, "y": 19, "z": 15},
  { "x": 10, "y": 20, "z": 15},

  { "x": 11, "y": 10, "z": 15},
  { "x": 11, "y": 11, "z": 15},
  { "x": 11, "y": 12, "z": 15},
  { "x": 11, "y": 13, "z": 15},
  { "x": 11, "y": 14, "z": 15},
  { "x": 11, "y": 15, "z": 15},
  { "x": 11, "y": 16, "z": 15},
  { "x": 11, "y": 17, "z": 15},
  { "x": 11, "y": 18, "z": 15},
  { "x": 11, "y": 19, "z": 15},
  { "x": 11, "y": 20, "z": 15},

  { "x": 12, "y": 10, "z": 15},
  { "x": 12, "y": 11, "z": 15},
  { "x": 12, "y": 12, "z": 15},
  { "x": 12, "y": 13, "z": 15},
  { "x": 12, "y": 14, "z": 15},
  { "x": 12, "y": 15, "z": 15},
  { "x": 12, "y": 16, "z": 15},
  { "x": 12, "y": 17, "z": 15},
  { "x": 12, "y": 18, "z": 15},
  { "x": 12, "y": 19, "z": 15},
  { "x": 12, "y": 20, "z": 15},

  { "x": 13, "y": 10, "z": 15},
  { "x": 13, "y": 11, "z": 15},
  { "x": 13, "y": 12, "z": 15},
  { "x": 13, "y": 13, "z": 15},
  { "x": 13, "y": 14, "z": 15},
  { "x": 13, "y": 15, "z": 15},
  { "x": 13, "y": 16, "z": 15},
  { "x": 13, "y": 17, "z": 15},
  { "x": 13, "y": 18, "z": 15},
  { "x": 13, "y": 19, "z": 15},
  { "x": 13, "y": 20, "z": 15},

  { "x": 14, "y": 10, "z": 15},
  { "x": 14, "y": 11, "z": 15},
  { "x": 14, "y": 12, "z": 15},
  { "x": 14, "y": 13, "z": 15},
  { "x": 14, "y": 14, "z": 15},
  { "x": 14, "y": 15, "z": 15},
  { "x": 14, "y": 16, "z": 15},
  { "x": 14, "y": 17, "z": 15},
  { "x": 14, "y": 18, "z": 15},
  { "x": 14, "y": 19, "z": 15},
  { "x": 14, "y": 20, "z": 15},

  { "x": 15, "y": 10, "z": 15},
  { "x": 15, "y": 11, "z": 15},
  { "x": 15, "y": 12, "z": 15},
  { "x": 15, "y": 13, "z": 15},
  { "x": 15, "y": 14, "z": 15},
  { "x": 15, "y": 15, "z": 15},
  { "x": 15, "y": 16, "z": 15},
  { "x": 15, "y": 17, "z": 15},
  { "x": 15, "y": 18, "z": 15},
  { "x": 15, "y": 19, "z": 15},
  { "x": 15, "y": 20, "z": 20},
]

onMounted(()=>{
  const chart = new Chart({
  container: 'container',
  autoFit: true,
  padding: 0,
});

chart.heatmap()
.data(data)
.encode('x', 'x')
.encode('y', 'y')
.encode('color', 'z')
.style('opacity', 0)
.tooltip(false);

chart.render();
})

</script>

<template>
  <div id="heatmap"></div>
</template>

<style scoped>
  #heatmap{
    background: #b8afaf11;
  }
</style>

posted by PaoPao-ovo over 1 year ago

相同问题不要多次提，在一个下面讨论即可。 https://github.com/antvis/G2/discussions/5981

posted by hustcc over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

热力图数据色阶显示问题 #5978

Company

Community

Support

Connect