问题标题

VChart 折线图能分段吗？

问题描述

vchart折线图有个点不想显示，能让折线图分段吗？

解决方案

如果某个点的值不合法，VChart会默认屏蔽掉这个点，可以将数据中的这个点对应的value设置为null即可。

比如下面数据10:00对应的点就不会显示了

data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: null
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  }

代码示例

const spec = {
  type: 'line',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: null
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  xField: 'time',
  yField: 'value'
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

结果展示

代码运行后，10:00对应的点就不会显示了，折线就分段了

在线demo：codesandbox.io/p/sandbox/l…

VChart 折线图能分段吗？

问题标题

问题描述

解决方案

代码示例

结果展示

相关文档