开发预览更新于 2026-05-10

ChartCrosshair 图表十字线

可嵌入任何 SVG 图表的十字定位线 + tooltip 工具。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfChartCrosshair } from '@chufix-design/vue';
const x = ref(180);
const y = ref(60);
function onMove(e: MouseEvent) {
  const svg = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
  x.value = e.clientX - svg.left;
  y.value = e.clientY - svg.top;
}
</script>
<template>
  <svg viewBox="0 0 480 200" width="100%" height="200" style="background: var(--bg-inset); border-radius: var(--r-6); cursor: crosshair;" @mousemove="onMove">
    <path d="M 0 150 L 60 130 L 120 110 L 180 90 L 240 70 L 300 80 L 360 60 L 420 50 L 480 40" fill="none" stroke="var(--accent-1)" stroke-width="2" />
    <CfChartCrosshair :x="x" :y="y" :width="480" :height="200" :tooltip="`y=${Math.round(y)}`" show-horizontal />
  </svg>
</template>

<script setup>
import { ref } from 'vue';
import { CfChartCrosshair } from '@chufix-design/vue';
const x = ref(180);
const y = ref(60);
function onMove(e) {
  const svg = (e.currentTarget).getBoundingClientRect();
  x.value = e.clientX - svg.left;
  y.value = e.clientY - svg.top;
}
</script>
<template>
  <svg viewBox="0 0 480 200" width="100%" height="200" style="background: var(--bg-inset); border-radius: var(--r-6); cursor: crosshair;" @mousemove="onMove">
    <path d="M 0 150 L 60 130 L 120 110 L 180 90 L 240 70 L 300 80 L 360 60 L 420 50 L 480 40" fill="none" stroke="var(--accent-1)" stroke-width="2" />
    <CfChartCrosshair :x="x" :y="y" :width="480" :height="200" :tooltip="`y=${Math.round(y)}`" show-horizontal />
  </svg>
</template>

import { CfChartCrosshair } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfChartCrosshair ... />
    </>
  );
}

API

属性	类型	默认值	说明
`visible`	`boolean`	`true`
`x / y`	`number`	`—`	像素坐标（在父 SVG 坐标系内）
`width / height`	`number`	`—`	父 SVG 总尺寸（用于线长）
`showVertical / showHorizontal`	`boolean`	`true / false`
`tooltip`	`string`	`—`	跟随光标的数值标签