VisActor / VisActor/VChart

[Bug] 使用updateData更新数据后area chat 不显示

Open
#4,081 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
1.8k
Forks
221
Avg merge
1d 6h
Merged PRs (30d)
26

Description

Version

2.0.0

Link to Minimal Reproduction

[Bug] 使用updateData更新数据后area chat 不显示

Steps to Reproduce
<template>
  <a-card title="系统监控" :body-style="{ padding: '20px 10px' }">
    <template #extra>
      <div class="flex items-center gap-10">
        <a-select :options="timeOptions" class="w-180" />
        <a-segmented v-model:value="value" :options="itemOptions" />
      </div>
    </template>
    <div ref="elRef"></div>
  </a-card>
</template>
<script lang="ts" setup>
  import { defineProps, ref, onMounted, watchEffect, onBeforeUnmount } from 'vue'
  import { VChart, type ISpec } from '@visactor/vchart'
  import type { SysMonitorProps } from './types'

  const { data = [] } = defineProps<SysMonitorProps>()
  const chartInstance = ref<VChart>()
  const elRef = ref<HTMLDivElement>()
  const value = ref(1)

  const spec: ISpec = {
    type: 'area',
    data: {
      id: 'monitor-chart',
      values: []
    },
    xField: 'time',
    yField: 'value',
    series: [
      {
        type: 'area'
      }
    ]
  }
  const timeOptions = [
    {
      label: '1小时',
      value: 0
    },
    {
      label: '2小时',
      value: 1
    },
    {
      label: '24小时',
      value: 2
    }
  ]
  const itemOptions = [
    {
      label: 'CPU',
      value: 1
    },
    {
      label: '磁盘IO',
      value: 2
    }
  ]

  onMounted(() => {
    const el = elRef.value
    if (!el) return
    chartInstance.value = new VChart(spec, { dom: el })
    chartInstance.value.renderSync()
  })

  watchEffect(() => {
    setTimeout(() => {
      chartInstance.value?.updateData('monitor-chart', data)
    }, 1000)
  })

  onBeforeUnmount(() => {
    chartInstance.value?.release()
  })
</script>

预览效果:

Image
Current Behavior
<template>
  <a-card title="系统监控" :body-style="{ padding: '20px 10px' }">
    <template #extra>
      <div class="flex items-center gap-10">
        <a-select :options="timeOptions" class="w-180" />
        <a-segmented v-model:value="value" :options="itemOptions" />
      </div>
    </template>
    <div ref="elRef"></div>
  </a-card>
</template>
<script lang="ts" setup>
  import { defineProps, ref, onMounted, watchEffect, onBeforeUnmount } from 'vue'
  import { VChart, type ISpec } from '@visactor/vchart'
  import type { SysMonitorProps } from './types'

  const { data = [] } = defineProps<SysMonitorProps>()
  const chartInstance = ref<VChart>()
  const elRef = ref<HTMLDivElement>()
  const value = ref(1)

  const spec: ISpec = {
    type: 'area',
    data: {
      id: 'monitor-chart',
      values: []
    },
    xField: 'time',
    yField: 'value',
    series: [
      {
        type: 'area'
      }
    ]
  }
  const timeOptions = [
    {
      label: '1小时',
      value: 0
    },
    {
      label: '2小时',
      value: 1
    },
    {
      label: '24小时',
      value: 2
    }
  ]
  const itemOptions = [
    {
      label: 'CPU',
      value: 1
    },
    {
      label: '磁盘IO',
      value: 2
    }
  ]

  onMounted(() => {
    const el = elRef.value
    if (!el) return
    chartInstance.value = new VChart(spec, { dom: el })
    chartInstance.value.renderSync()
  })

  watchEffect(() => {
    setTimeout(() => {
      chartInstance.value?.updateData('monitor-chart', data)
    }, 1000)
  })

  onBeforeUnmount(() => {
    chartInstance.value?.release()
  })
</script>

预览效果:

Image
Expected Behavior

希望能正常显示

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the area-chart example from the issue with the VChart constructor, renderSync(), and updateData('monitor-chart', data) entry points. Trace how updateData handles the named data set for area charts and verify the chart displays the supplied values after the update; no project file or test is named in the report.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.