VisActor VBI
  • 日本語

      • Dataset

      単一指標 単一ディメンション

      単一指標 単一ディメンション

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "date": "2019",
      "profit": 10
    },
    {
      "date": "2020",
      "profit": 30
    },
    {
      "date": "2021",
      "profit": 30
    },
    {
      "date": "2022",
      "profit": 50
    },
    {
      "date": "2023",
      "profit": 40
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      単一指標 複数ディメンション

      単一指標 複数ディメンション

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "city": "A",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "east",
      "city": "B",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "city": "C",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "city": "D",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "east",
      "city": "E",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "A",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "B",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "C",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "D",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "E",
      "profit": 40
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      単一指標 ゼロディメンション

      単一指標 ゼロディメンション

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "profit": 10
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      複数指標 単一ディメンション

      複数指標 単一ディメンション

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "discount": 0.1
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "discount": 0.1
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "discount": 0.1
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "discount": 0.1
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "discount": 0.1
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      複数指標 複数ディメンション

      複数指標 複数ディメンション

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "city": "A",
      "profit": 10,
      "sales": 20,
      "discount": 0.1
    },
    {
      "date": "2019",
      "region": "east",
      "city": "B",
      "profit": 30,
      "sales": 60,
      "discount": 0.1
    },
    {
      "date": "2019",
      "region": "east",
      "city": "C",
      "profit": 30,
      "sales": 60,
      "discount": 0.1
    },
    {
      "date": "2019",
      "region": "east",
      "city": "D",
      "profit": 50,
      "sales": 100,
      "discount": 0.1
    },
    {
      "date": "2019",
      "region": "east",
      "city": "E",
      "profit": 40,
      "sales": 80,
      "discount": 0.1
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "A",
      "profit": 10,
      "sales": 20,
      "discount": 0.1
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "B",
      "profit": 30,
      "sales": 60,
      "discount": 0.1
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "C",
      "profit": 30,
      "sales": 60,
      "discount": 0.1
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "D",
      "profit": 50,
      "sales": 100,
      "discount": 0.1
    },
    {
      "date": "2020",
      "region": "north of east",
      "city": "E",
      "profit": 40,
      "sales": 80,
      "discount": 0.1
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      複数指標 ゼロディメンション

      複数指標 ゼロディメンション

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "profit": 1,
      "sales": 2,
      "discount": 0.1
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      データディメンションと指標設定

      データディメンションと指標設定

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "region": "east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "region": "east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "region": "east",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "region": "east",
      "profit": 40,
      "sales": 80
    },
    {
      "date": "2019",
      "region": "north of east",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "region": "north of east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "region": "north of east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "region": "north of east",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "region": "north of east",
      "profit": 40,
      "sales": 80
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利益"
    },
    {
      "id": "sales",
      "alias": "販売量"
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "日付"
    },
    {
      "id": "region",
      "alias": "地域"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      自動選択

      自動選択

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "region": "east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "region": "east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "region": "east",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "region": "east",
      "profit": 40,
      "sales": 80
    },
    {
      "date": "2019",
      "region": "north of east",
      "profit": 10,
      "sales": 20
    },
    {
      "date": "2020",
      "region": "north of east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2021",
      "region": "north of east",
      "profit": 30,
      "sales": 60
    },
    {
      "date": "2022",
      "region": "north of east",
      "profit": 50,
      "sales": 100
    },
    {
      "date": "2023",
      "region": "north of east",
      "profit": 40,
      "sales": 80
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}