VisActor VBI
  • Tiếng Việt

      • AnnotationPoint

      điều kiện

      điều kiện

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "area",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "annotationPoint": [
    {
      "selector": [
        {
          "field": "sales",
          "operator": "<=",
          "value": 80
        }
      ],
      "text": "Doanh số <= 80",
      "textAlign": "right",
      "offsetX": -15
    },
    {
      "selector": [
        {
          "field": "date",
          "operator": "in",
          "value": "2023"
        }
      ],
      "text": "Năm 2023",
      "textAlign": "left",
      "offsetX": 0
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "Ngày"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    },
    {
      "id": "sales",
      "alias": "Doanh số"
    },
    {
      "id": "count",
      "alias": "Số lượng"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      datum một phần

      datum một phần

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "line",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "annotationPoint": [
    {
      "selector": [
        {
          "sales": 20
        }
      ],
      "text": [
        "Doanh số",
        "Giá trị nhỏ nhất 20"
      ],
      "textAlign": "right",
      "offsetX": -15
    },
    {
      "selector": [
        100
      ],
      "text": [
        "Doanh số",
        "Giá trị lớn nhất 100"
      ],
      "textAlign": "right",
      "offsetY": 15,
      "offsetX": -20
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "Ngày"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    },
    {
      "id": "sales",
      "alias": "Doanh số"
    },
    {
      "id": "count",
      "alias": "Số lượng"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      điểm giá trị

      điểm giá trị

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "column",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "annotationPoint": {
    "selector": 10,
    "text": "Giá trị nhỏ nhất",
    "textFontWeight": 600,
    "textBaseline": "bottom",
    "textAlign": "center",
    "textColor": "#fff",
    "backgroundColor": "gray",
    "backgroundBorderRadius": 10,
    "backgroundPadding": 10,
    "offsetY": -5
  },
  "dimensions": [
    {
      "id": "date",
      "alias": "Ngày"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    },
    {
      "id": "sales",
      "alias": "Doanh số"
    },
    {
      "id": "count",
      "alias": "Số lượng"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}