Skip to content

横轴数据为分类类型的折线图绘制出错。 #257

Closed
@simaQ

Description

  • F2 Version: 3.2.0
  • Platform:
  • Mini Showcase(like screenshots):
  • CodePen Link:

数据重复时,绘制出错。

image

let data = [
    {year: '2013',manage: 100,netAmount: 200,name: "经营活动产生现金流"},
    {year: '2014',manage: 110,netAmount: 150,name: "经营活动产生现金流"},
    {year: '2015',manage: 115,netAmount: 123,name: "经营活动产生现金流"},
    {year: '2016',manage: 230,netAmount: 250,name: "经营活动产生现金流"},
    {year: '2017',manage: 180,netAmount: 280,name: "经营活动产生现金流"},
    {year: '2018',manage: 160,netAmount: 230,name: "经营活动产生现金流"},
    {year: '2013',manage: 200,netAmount: 200,name: "投资活动产生现金流"},
    {year: '2014',manage: 140,netAmount: 150,name: "投资活动产生现金流"},
    {year: '2015',manage: 150,netAmount: 123,name: "投资活动产生现金流"},
    {year: '2016',manage: 230,netAmount: 250,name: "投资活动产生现金流"},
    {year: '2017',manage: 196,netAmount: 280,name: "投资活动产生现金流"},
    {year: '2018',manage: 150,netAmount: 230,name: "投资活动产生现金流"},
    {year: '2013',manage: 200,netAmount: 200,name: "筹资活动产生现金流"},
    {year: '2014',manage: 370,netAmount: 150,name: "筹资活动产生现金流"},
    {year: '2015',manage: 400,netAmount: 123,name: "筹资活动产生现金流"},
    {year: '2016',manage: -450,netAmount: 250,name: "筹资活动产生现金流"},
    {year: '2017',manage: 260,netAmount: 280,name: "筹资活动产生现金流"},
    {year: '2018',manage: 140,netAmount: 230,name: "筹资活动产生现金流"}]
;

  const chart = new F2.Chart({
    id: 'mountNode',
    syncY: true,
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data);
  chart.axis('netAmount', false); // 隐藏

  chart.interval().position('year*manage').color('name').adjust('stack');
  chart.line().position('year*netAmount');
  chart.render();

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions