antvis/G2

迷你面积图只有一条数据的时候能不能显示出来一个点呢? #6054

YY88Xu posted onGitHub

问题描述

import { Chart } from '@antv/g2';

const data = [ 264 ];

const chart = new Chart({ container: 'container', width: 480, height: 80, });

chart.data(data);

chart .area() .encode('x', (_, idx) => idx) .encode('y', (d) => d) .encode('shape', 'smooth') .scale('y', { zero: true }) .style('fill', 'linear-gradient(-90deg, white 0%, darkgreen 100%)') .style('fillOpacity', 0.6) .animate('enter', { type: 'fadeIn' }) .axis(false);

chart.interaction('tooltip', { render: (e, { title, items }) => items[0].value, });

chart.render(); Uploading image.png…

重现链接

No response

重现步骤

现在迷你面积图只有一条数据的时候,啥也没有,这种显示能不能优化成显示一个点呢?

预期行为

No response

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


area 没有内置这样的逻辑,从这个图形上来说,也没有办法内置。需要你这里在自己代码中处理一下。

比如增加一个 line,然后如果数据为 1 的时候,lineWidth 设置大一些。

chart
  .line()
  .encode('x', (_, idx) => idx)
  .encode('y', (d) => d)
  .encode('shape', 'smooth')
  .scale('y', { zero: true })
  .style('fillOpacity', 0.6)
  .style('lineWidth', () => data.length === 1 ? 4 : 1)  // 👈🏻 这里
  .animate('enter', { type: 'fadeIn' })
  .axis(false);
posted by hustcc over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests