unovis-vue-skilld

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

f5/unovis

@unovis/vue

f5/unovis

@unovis/vue

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript

Version: 1.6.4 Tags: beta: 1.6.5-topojson.0, latest: 1.6.4

References: GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

适用于React、Angular、Svelte、Vue以及原生TypeScript或JavaScript的模块化数据可视化框架

**版本：**1.6.4 **标签：**beta: 1.6.5-topojson.0, latest: 1.6.4

参考链接：GitHub Issues — 问题、解决方案、边缘情况 • GitHub Discussions — 问答、模式、实践方案 • Releases — 更新日志、破坏性变更、新API

API Changes

API变更

This section documents version-specific API changes for

@unovis/vue

— prioritize recent major/minor releases.

NEW:
```
VisPlotband
```
and
```
VisPlotline
```
— new auxiliary components for highlighting data ranges or specific values source
NEW:
```
VisRollingPinLegend
```
— new specialized legend component added in v1.6.0 source
NEW:
```
VisTreemap
```
— new hierarchical data visualization component; includes
```
tileShowHtmlTooltip
```
and
```
topLevelParent
```
props as of v1.6.4 source
NEW:
```
VisAnnotations
```
— new component for adding callouts and annotations to charts source
NEW:
```
onRenderComplete
```
— new callback available in
```
VisXYContainer
```
and
```
VisSingleContainer
```
to detect when rendering is finished source
NEW:
```
VisArea
```
enhancements — added
```
stackMinHeight
```
for better visibility of small values and optional line display via core config source
NEW:
```
VisSankey
```
updates — new
```
onLayoutCalculated
```
callback,
```
getSankeyDepth
```
method, and support for Zoom/Pan and Node selection source
NEW:
```
VisGraph
```
features — support for custom node rendering functions, SVG link labels, and Zoom start/end callbacks source
NEW:
```
VisCrosshair
```
additions — new
```
forceShowAt
```
prop,
```
onCrosshairMove
```
callback, and
```
skipRangeCheck
```
configuration source
NEW: SSR Readiness — major internal refactor to support SSR (Server-Side Rendering) for Nuxt and other frameworks source
NEW: Reactive Map Data —
```
VisLeafletMap
```
data property is now fully reactive in Vue source
NEW: Automatic Tooltip Placement —
```
VisTooltip
```
now automatically aligns when used in conjunction with
```
VisCrosshair
```
source
NEW:
```
VisBulletLegend
```
— now supports multiple colors per legend item source
NEW:
```
VisXYContainer
```
— improved
```
scaleByDomain
```
behavior to ensure consistency across multiple chart types source

Also changed:

calc()

support in Annotations ·

theme-patterns

accessible theme ·

VisFlowLegend

refactored wrapper ·

axis grid line dasharray

CSS variables ·

skipRangeCheck

Crosshair prop

本部分记录

@unovis/vue

的版本专属API变更 — 优先查看近期的主版本/次版本更新。

新增：
```
VisPlotband
```
和
```
VisPlotline
```
— 用于高亮数据范围或特定值的新辅助组件来源
新增：
```
VisRollingPinLegend
```
— v1.6.0版本新增的专用图例组件来源
新增：
```
VisTreemap
```
— 新的层级数据可视化组件；v1.6.4版本起新增
```
tileShowHtmlTooltip
```
和
```
topLevelParent
```
属性来源
新增：
```
VisAnnotations
```
— 用于在图表中添加标注和注释的新组件来源
新增：
```
onRenderComplete
```
—
```
VisXYContainer
```
和
```
VisSingleContainer
```
中新增的回调函数，用于检测渲染完成时机来源
新增：
```
VisArea
```
增强功能 — 新增
```
stackMinHeight
```
属性以提升小数值的可见性，同时支持通过核心配置启用可选线条显示来源
新增：
```
VisSankey
```
更新 — 新增
```
onLayoutCalculated
```
回调函数、
```
getSankeyDepth
```
方法，以及缩放/平移和节点选择支持来源
新增：
```
VisGraph
```
功能 — 支持自定义节点渲染函数、SVG链接标签，以及缩放开始/结束回调来源
新增：
```
VisCrosshair
```
扩展 — 新增
```
forceShowAt
```
属性、
```
onCrosshairMove
```
回调函数，以及
```
skipRangeCheck
```
配置项来源
新增：SSR就绪 — 重大内部重构，以支持Nuxt等框架的SSR（服务端渲染）来源
新增：响应式地图数据 —
```
VisLeafletMap
```
的data属性现在在Vue中完全支持响应式来源
新增：自动工具提示定位 — 当与
```
VisCrosshair
```
配合使用时，
```
VisTooltip
```
现在会自动对齐来源
新增：
```
VisBulletLegend
```
— 现在支持每个图例项使用多种颜色来源
新增：
```
VisXYContainer
```
— 改进
```
scaleByDomain
```
行为，确保多种图表类型之间的一致性来源

**其他变更：**Annotations中的

calc()

支持 ·

theme-patterns

可访问性主题 ·

VisFlowLegend

重构包装器 ·

axis grid line dasharray

CSS变量 ·

VisCrosshair

的

skipRangeCheck

属性

Best Practices

最佳实践

Support ordinal values in XY components by returning the data index in the
```
x
```
accessor and providing a
```
tickFormat
```
to the
```
VisAxis
```
source

vue

<script setup lang="ts">
const x = (d, i: number) => i
const tickFormat = (i: number) => data[i].category
</script>

<template>
  <VisXYContainer :data="data">
    <VisStackedBar :x="x" :y="d => d.value" />
    <VisAxis type="x" :tick-format="tickFormat" />
  </VisXYContainer>
</template>

Define custom SVG gradients or patterns using the
```
svgDefs
```
property on
```
VisXYContainer
```
or
```
VisSingleContainer
```
source

vue

<template>
  <VisXYContainer :svg-defs="gradientDef">
    <VisArea :x="d => d.x" :y="d => d.y" color="url(#gradient-id)" />
  </VisXYContainer>
</template>

Display continuous lines across missing data points by filtering
```
null
```
values and passing the dataset directly to
```
VisLine
```
instead of the container source

vue

<template>
  <VisXYContainer>

    <VisLine :data="data.filter(d => d.value !== null)" :x="x" :y="y" />
  </VisXYContainer>
</template>

Attach events to axis ticks or other sub-elements using the
```
events
```
prop and component-specific selectors source

vue

<script setup lang="ts">
import { VisAxisSelectors } from '@unovis/vue'
const axisEvents = {
  [VisAxisSelectors.tick]: {
    click: (val: number) => console.log('Clicked tick:', val)
  }
}
</script>

<template>
  <VisAxis type="x" :events="axisEvents" />
</template>

Wrap Unovis components in
```
<ClientOnly>
```
when using Nuxt or SSR to prevent errors from top-level
```
document
```
or
```
window
```
references source

vue

<template>
  <ClientOnly>
    <VisXYContainer :data="data">
      <VisLine :x="x" :y="y" />
    </VisXYContainer>
  </ClientOnly>
</template>

Enable tooltips or interactions on TopoJSON map areas using the
```
feature
```
selector source

vue

<script setup lang="ts">
import { VisTopoJSONMapSelectors } from '@unovis/vue'
const triggers = {
  [VisTopoJSONMapSelectors.feature]: d => d.properties.name
}
</script>

<template>
  <VisTopoJSONMap :triggers="triggers" ... />
</template>

Fix clipped top or bottom axis labels by increasing the
```
margin
```
property on the
```
VisXYContainer
```
source

vue

<template>

  <VisXYContainer :margin="{ top: 10, right: 10, bottom: 10, left: 10 }">
    <VisStackedBar ... />
  </VisXYContainer>
</template>

Use
```
tickTextWidth
```
on
```
VisAxis
```
to enable automatic label wrapping and trimming for long axis labels source

vue

<template>
  <VisAxis type="x" :tick-text-width="100" />
</template>

Display multiple colors within a single legend bullet by passing an array to the
```
color
```
property of a legend item source

vue

<script setup lang="ts">
const items = [
  { name: 'Multi-segment', color: ['#ff0000', '#00ff00', '#0000ff'] }
]
</script>

<template>
  <VisBulletLegend :items="items" />
</template>

Programmatically control crosshair visibility and position using the
```
forceShowAt
```
property for custom sync or interaction logic source

vue

<template>

  <VisCrosshair :force-show-at="{ x: 1707093300 }" />
</template>

在XY组件中支持序数类型值：在
```
x
```
访问器中返回数据索引，并为
```
VisAxis
```
提供
```
tickFormat
```
函数来源

vue

<script setup lang="ts">
const x = (d, i: number) => i
const tickFormat = (i: number) => data[i].category
</script>

<template>
  <VisXYContainer :data="data">
    <VisStackedBar :x="x" :y="d => d.value" />
    <VisAxis type="x" :tick-format="tickFormat" />
  </VisXYContainer>
</template>

在
```
VisXYContainer
```
或
```
VisSingleContainer
```
上使用
```
svgDefs
```
属性定义自定义SVG渐变或图案来源

vue

<template>
  <VisXYContainer :svg-defs="gradientDef">
    <VisArea :x="d => d.x" :y="d => d.y" color="url(#gradient-id)" />
  </VisXYContainer>
</template>

通过过滤
```
null
```
值并将数据集直接传递给
```
VisLine
```
而非容器，来显示跨缺失数据点的连续线条来源

vue

<template>
  <VisXYContainer>

    <VisLine :data="data.filter(d => d.value !== null)" :x="x" :y="y" />
  </VisXYContainer>
</template>

使用
```
events
```
属性和组件特定选择器，将事件绑定到轴刻度或其他子元素来源

vue

<script setup lang="ts">
import { VisAxisSelectors } from '@unovis/vue'
const axisEvents = {
  [VisAxisSelectors.tick]: {
    click: (val: number) => console.log('Clicked tick:', val)
  }
}
</script>

<template>
  <VisAxis type="x" :events="axisEvents" />
</template>

在使用Nuxt或SSR时，将Unovis组件包裹在
```
<ClientOnly>
```
中，以避免顶级
```
document
```
或
```
window
```
引用导致的错误来源

vue

<template>
  <ClientOnly>
    <VisXYContainer :data="data">
      <VisLine :x="x" :y="y" />
    </VisXYContainer>
  </ClientOnly>
</template>

使用
```
feature
```
选择器为TopoJSON地图区域启用工具提示或交互来源

vue

<script setup lang="ts">
import { VisTopoJSONMapSelectors } from '@unovis/vue'
const triggers = {
  [VisTopoJSONMapSelectors.feature]: d => d.properties.name
}
</script>

<template>
  <VisTopoJSONMap :triggers="triggers" ... />
</template>

通过增加
```
VisXYContainer
```
上的
```
margin
```
属性来修复顶部或底部轴标签被截断的问题来源

vue

<template>

  <VisXYContainer :margin="{ top: 10, right: 10, bottom: 10, left: 10 }">
    <VisStackedBar ... />
  </VisXYContainer>
</template>

在
```
VisAxis
```
上使用
```
tickTextWidth
```
属性，为长轴标签启用自动换行和截断来源

vue

<template>
  <VisAxis type="x" :tick-text-width="100" />
</template>

通过为图例项的
```
color
```
属性传递数组，在单个图例标记中显示多种颜色来源

vue

<script setup lang="ts">
const items = [
  { name: 'Multi-segment', color: ['#ff0000', '#00ff00', '#0000ff'] }
]
</script>

<template>
  <VisBulletLegend :items="items" />
</template>

使用
```
forceShowAt
```
属性以编程方式控制十字准线的可见性和位置，用于自定义同步或交互逻辑来源

vue

<template>

  <VisCrosshair :force-show-at="{ x: 1707093300 }" />
</template>