VisActor VBI
  • Tiếng Việt

      • Chú thích dữ liệu

      Chú thích điểm dữ liệu

      Cấu hình chú thích điểm dữ liệu bằng thuộc tính annotationPoint. Hỗ trợ điều kiện lọc selector và văn bản hiển thị text.

      Loading...

      Chú thích đường ngang dữ liệu

      Cấu hình chú thích đường ngang bằng thuộc tính annotationHorizontalLine. Cần chỉ định giá trị số yValue.

      import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { registerAll, VSeed, Builder } from '@visactor/vseed'
registerAll()

const Demo = () => {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!ref.current) {
      return
    }

    const vseed: VSeed = {
      chartType: 'area',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
        { date: '2024', profit: 70, sales: 100 },
      ],
      annotationHorizontalLine: {
        yValue: 170,
        text: 'Lợi nhuận 70',
      },
    }

    const spec = Builder.from(vseed).build()

    const vchart = new VChart(spec, { dom: ref.current })
    vchart.renderSync()

    return () => vchart.release()
  })

  return <div ref={ref} style={{ height: 260, width: '100%' }}></div>
}

export default Demo

      Chú thích đường dọc dữ liệu

      Cấu hình chú thích đường dọc bằng thuộc tính annotationVerticalLine. Có thể chỉ định giá trị chiều qua selector.

      import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { registerAll, VSeed, Builder } from '@visactor/vseed'
registerAll()

const Demo = () => {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!ref.current) {
      return
    }

    const vseed: VSeed = {
      chartType: 'columnParallel',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
        { date: '2024', profit: 70, sales: 100 },
      ],
      annotationVerticalLine: {
        selector: '2023',
        text: 'Năm 2023',
      },
    }

    const spec = Builder.from(vseed).build()

    const vchart = new VChart(spec, { dom: ref.current })
    vchart.renderSync()

    return () => vchart.release()
  })

  return <div ref={ref} style={{ height: 260, width: '100%' }}></div>
}

export default Demo

      Chú thích vùng dữ liệu

      Cấu hình chú thích vùng bằng thuộc tính annotationArea. Có thể cấu hình selector cho điều kiện bắt đầu và kết thúc.

      import { useRef, useEffect } from 'react'
import VChart from '@visactor/vchart'
import { registerAll, VSeed, Builder } from '@visactor/vseed'
registerAll()

const Demo = () => {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!ref.current) {
      return
    }

    const vseed: VSeed = {
      chartType: 'columnParallel',
      dataset: [
        { date: '2019', profit: 10, sales: 100 },
        { date: '2020', profit: 30, sales: 200 },
        { date: '2021', profit: 30, sales: 300 },
        { date: '2022', profit: 50, sales: 400 },
        { date: '2023', profit: 40, sales: 500 },
        { date: '2024', profit: 70, sales: 100 },
      ],
      annotationArea: [
        {
          selector: [{ date: '2021' }],
          text: '2022~2023',
          textPosition: 'top',
          textAlign: 'center',
        },
        {
          selector: [{ date: '2022' }],
          text: '2022~2023',
          textPosition: 'top',
          textAlign: 'center',
        },
      ],
    }

    const spec = Builder.from(vseed).build()

    const vchart = new VChart(spec, { dom: ref.current })
    vchart.renderSync()

    return () => vchart.release()
  })

  return <div ref={ref} style={{ height: 260, width: '100%' }}></div>
}

export default Demo