VisActor VBI
  • Deutsch

      • Datenannotation

      Datenpunkt-Annotation

      Konfiguriere Datenpunkt-Annotationen über die Eigenschaft annotationPoint. Unterstützt die Filterbedingung selector und den Anzeigetext text.

      Loading...

      Daten-Horizontallinien-Annotation

      Konfiguriere Horizontallinien-Annotationen über die Eigenschaft annotationHorizontalLine. Dafür muss ein numerischer yValue angegeben werden.

      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: 'Gewinn 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

      Daten-Vertikallinien-Annotation

      Konfiguriere Vertikallinien-Annotationen über die Eigenschaft annotationVerticalLine. Über selector kann ein Dimensionswert angegeben werden.

      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: 'Jahr 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

      Datenbereichs-Annotation

      Konfiguriere Bereichs-Annotationen über die Eigenschaft annotationArea. Für Start- und Endbedingungen kann jeweils ein selector konfiguriert werden.

      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