diff --git a/src/views/DataBrowser/MetricDataModal.tsx b/src/views/DataBrowser/MetricDataModal.tsx
index 74ef2bc2..6d9fe7db 100644
--- a/src/views/DataBrowser/MetricDataModal.tsx
+++ b/src/views/DataBrowser/MetricDataModal.tsx
@@ -31,7 +31,7 @@ import {
 } from '@chakra-ui/react';
 import { FaTable, FaChartLine, FaCalendar, FaDownload } from 'react-icons/fa';
 import { fetchMetricData, MetricDataResponse, TreeMetric } from '@services/categoryService';
-import KLineChartView from './KLineChartView';
+import SimpleLineChart from './SimpleLineChart';
 
 // 黑金主题配色
 const themeColors = {
@@ -277,10 +277,10 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
                   </TabList>
 
                   <TabPanels>
-                    {/* 折线图 - 使用 KLineChart */}
+                    {/* 折线图 - 使用简单 Canvas 实现 */}
                     <TabPanel p={4}>
                       {metricData && metricData.data.length > 0 ? (
-                        <KLineChartView
+                        <SimpleLineChart
                           data={metricData.data}
                           metricName={metricData.metric_name}
                           unit={metricData.unit}
diff --git a/src/views/DataBrowser/SimpleLineChart.tsx b/src/views/DataBrowser/SimpleLineChart.tsx
new file mode 100644
index 00000000..7ea6597c
--- /dev/null
+++ b/src/views/DataBrowser/SimpleLineChart.tsx
@@ -0,0 +1,544 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Button,
+  ButtonGroup,
+  Flex,
+  Icon,
+  Tooltip,
+} from '@chakra-ui/react';
+import {
+  FaExpand,
+  FaCompress,
+  FaCamera,
+  FaRedo,
+} from 'react-icons/fa';
+import { MetricDataPoint } from '@services/categoryService';
+
+// 黑金主题配色
+const themeColors = {
+  bg: {
+    primary: '#0a0a0a',
+    secondary: '#1a1a1a',
+    card: '#1e1e1e',
+  },
+  text: {
+    primary: '#ffffff',
+    secondary: '#b8b8b8',
+    muted: '#808080',
+    gold: '#D4AF37',
+  },
+  border: {
+    default: 'rgba(255, 255, 255, 0.1)',
+    gold: 'rgba(212, 175, 55, 0.3)',
+  },
+  primary: {
+    gold: '#D4AF37',
+    goldLight: '#F4E3A7',
+  },
+};
+
+interface SimpleLineChartProps {
+  data: MetricDataPoint[];
+  metricName: string;
+  unit: string;
+  frequency: string;
+}
+
+type TimeRange = '1M' | '3M' | '6M' | '1Y' | 'YTD' | 'ALL';
+
+const SimpleLineChart: React.FC<SimpleLineChartProps> = ({
+  data,
+  metricName,
+  unit,
+  frequency,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [selectedRange, setSelectedRange] = useState<TimeRange>('ALL');
+  const [hoveredPoint, setHoveredPoint] = useState<{ x: number; y: number; data: MetricDataPoint } | null>(null);
+
+  // 过滤并排序数据
+  const processedData = useMemo(() => {
+    const filtered = data
+      .filter((item) => item.value !== null)
+      .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+    // 根据时间范围筛选
+    if (selectedRange === 'ALL' || filtered.length === 0) {
+      return filtered;
+    }
+
+    const now = new Date();
+    let startDate: Date;
+
+    switch (selectedRange) {
+      case '1M':
+        startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
+        break;
+      case '3M':
+        startDate = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate());
+        break;
+      case '6M':
+        startDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate());
+        break;
+      case '1Y':
+        startDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());
+        break;
+      case 'YTD':
+        startDate = new Date(now.getFullYear(), 0, 1);
+        break;
+      default:
+        return filtered;
+    }
+
+    return filtered.filter((item) => new Date(item.date) >= startDate);
+  }, [data, selectedRange]);
+
+  // 计算统计数据
+  const stats = useMemo(() => {
+    const values = processedData.map((item) => item.value as number);
+
+    if (values.length === 0) {
+      return { min: 0, max: 0, avg: 0, latest: 0, change: 0, changePercent: 0 };
+    }
+
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
+    const latest = values[values.length - 1];
+    const first = values[0];
+    const change = latest - first;
+    const changePercent = first !== 0 ? (change / first) * 100 : 0;
+
+    return { min, max, avg, latest, change, changePercent };
+  }, [processedData]);
+
+  // 绘制图表
+  useEffect(() => {
+    if (!canvasRef.current || processedData.length === 0) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // 设置 canvas 尺寸（高分辨率）
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+
+    const width = rect.width;
+    const height = rect.height;
+    const padding = { top: 30, right: 60, bottom: 60, left: 60 };
+    const chartWidth = width - padding.left - padding.right;
+    const chartHeight = height - padding.top - padding.bottom;
+
+    // 清空画布
+    ctx.fillStyle = themeColors.bg.card;
+    ctx.fillRect(0, 0, width, height);
+
+    // 获取数据范围
+    const values = processedData.map((item) => item.value as number);
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
+    const valueRange = maxValue - minValue || 1;
+
+    // 绘制网格线
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
+    ctx.lineWidth = 1;
+
+    // 横向网格线（5条）
+    for (let i = 0; i <= 5; i++) {
+      const y = padding.top + (chartHeight * i) / 5;
+      ctx.beginPath();
+      ctx.moveTo(padding.left, y);
+      ctx.lineTo(padding.left + chartWidth, y);
+      ctx.stroke();
+
+      // Y轴刻度标签
+      const value = maxValue - (valueRange * i) / 5;
+      ctx.fillStyle = themeColors.text.secondary;
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'right';
+      ctx.fillText(value.toFixed(2), padding.left - 10, y + 4);
+    }
+
+    // 纵向网格线（根据数据点数量决定）
+    const xAxisSteps = Math.min(10, processedData.length);
+    for (let i = 0; i <= xAxisSteps; i++) {
+      const x = padding.left + (chartWidth * i) / xAxisSteps;
+      ctx.beginPath();
+      ctx.moveTo(x, padding.top);
+      ctx.lineTo(x, padding.top + chartHeight);
+      ctx.stroke();
+
+      // X轴日期标签（只显示部分）
+      if (i % Math.ceil(xAxisSteps / 5) === 0 || i === xAxisSteps) {
+        const dataIndex = Math.floor((processedData.length - 1) * (i / xAxisSteps));
+        const date = processedData[dataIndex]?.date || '';
+        ctx.fillStyle = themeColors.text.secondary;
+        ctx.font = '11px sans-serif';
+        ctx.textAlign = 'center';
+        ctx.save();
+        ctx.translate(x, padding.top + chartHeight + 15);
+        ctx.rotate(-Math.PI / 6);
+        ctx.fillText(date, 0, 0);
+        ctx.restore();
+      }
+    }
+
+    // 绘制折线
+    ctx.strokeStyle = themeColors.primary.gold;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+
+    processedData.forEach((item, index) => {
+      const x = padding.left + (chartWidth * index) / (processedData.length - 1 || 1);
+      const y = padding.top + chartHeight - ((item.value as number - minValue) / valueRange) * chartHeight;
+
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+
+    ctx.stroke();
+
+    // 绘制数据点
+    ctx.fillStyle = themeColors.primary.gold;
+    processedData.forEach((item, index) => {
+      const x = padding.left + (chartWidth * index) / (processedData.length - 1 || 1);
+      const y = padding.top + chartHeight - ((item.value as number - minValue) / valueRange) * chartHeight;
+
+      ctx.beginPath();
+      ctx.arc(x, y, 3, 0, 2 * Math.PI);
+      ctx.fill();
+    });
+
+    // 绘制悬停点
+    if (hoveredPoint) {
+      ctx.strokeStyle = themeColors.primary.goldLight;
+      ctx.lineWidth = 1;
+      ctx.setLineDash([5, 5]);
+
+      // 垂直线
+      ctx.beginPath();
+      ctx.moveTo(hoveredPoint.x, padding.top);
+      ctx.lineTo(hoveredPoint.x, padding.top + chartHeight);
+      ctx.stroke();
+
+      // 水平线
+      ctx.beginPath();
+      ctx.moveTo(padding.left, hoveredPoint.y);
+      ctx.lineTo(padding.left + chartWidth, hoveredPoint.y);
+      ctx.stroke();
+
+      ctx.setLineDash([]);
+
+      // 高亮点
+      ctx.fillStyle = themeColors.primary.goldLight;
+      ctx.beginPath();
+      ctx.arc(hoveredPoint.x, hoveredPoint.y, 5, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+  }, [processedData, hoveredPoint]);
+
+  // 鼠标移动事件
+  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!canvasRef.current || processedData.length === 0) return;
+
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const padding = { top: 30, right: 60, bottom: 60, left: 60 };
+    const chartWidth = rect.width - padding.left - padding.right;
+    const chartHeight = rect.height - padding.top - padding.bottom;
+
+    // 判断是否在图表区域内
+    if (
+      x >= padding.left &&
+      x <= padding.left + chartWidth &&
+      y >= padding.top &&
+      y <= padding.top + chartHeight
+    ) {
+      // 找到最近的数据点
+      const relativeX = x - padding.left;
+      const index = Math.round((relativeX / chartWidth) * (processedData.length - 1));
+      const dataPoint = processedData[index];
+
+      if (dataPoint) {
+        const values = processedData.map((item) => item.value as number);
+        const minValue = Math.min(...values);
+        const maxValue = Math.max(...values);
+        const valueRange = maxValue - minValue || 1;
+
+        const pointX = padding.left + (chartWidth * index) / (processedData.length - 1 || 1);
+        const pointY =
+          padding.top + chartHeight - ((dataPoint.value as number - minValue) / valueRange) * chartHeight;
+
+        setHoveredPoint({ x: pointX, y: pointY, data: dataPoint });
+      }
+    } else {
+      setHoveredPoint(null);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredPoint(null);
+  };
+
+  // 时间范围切换
+  const handleTimeRangeChange = (range: TimeRange) => {
+    setSelectedRange(range);
+  };
+
+  // 重置
+  const handleReset = () => {
+    setSelectedRange('ALL');
+  };
+
+  // 截图
+  const handleScreenshot = () => {
+    if (!canvasRef.current) return;
+
+    canvasRef.current.toBlob((blob) => {
+      if (!blob) return;
+
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${metricName}_${new Date().toISOString().split('T')[0]}.png`;
+      link.click();
+      URL.revokeObjectURL(url);
+    });
+  };
+
+  // 全屏
+  const toggleFullscreen = () => {
+    if (!containerRef.current) return;
+
+    if (!isFullscreen) {
+      if (containerRef.current.requestFullscreen) {
+        containerRef.current.requestFullscreen();
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+    setIsFullscreen(!isFullscreen);
+  };
+
+  // 格式化数字
+  const formatNumber = (num: number) => {
+    if (Math.abs(num) >= 1e9) {
+      return (num / 1e9).toFixed(2) + 'B';
+    }
+    if (Math.abs(num) >= 1e6) {
+      return (num / 1e6).toFixed(2) + 'M';
+    }
+    if (Math.abs(num) >= 1e3) {
+      return (num / 1e3).toFixed(2) + 'K';
+    }
+    return num.toFixed(2);
+  };
+
+  return (
+    <VStack align="stretch" spacing={4} w="100%" ref={containerRef}>
+      {/* 工具栏 */}
+      <Flex justify="space-between" align="center" wrap="wrap" gap={4}>
+        {/* 时间范围选择 */}
+        <ButtonGroup size="sm" isAttached variant="outline">
+          {(['1M', '3M', '6M', '1Y', 'YTD', 'ALL'] as TimeRange[]).map((range) => (
+            <Button
+              key={range}
+              onClick={() => handleTimeRangeChange(range)}
+              bg={selectedRange === range ? themeColors.primary.gold : 'transparent'}
+              color={
+                selectedRange === range ? themeColors.bg.primary : themeColors.text.secondary
+              }
+              borderColor={themeColors.border.gold}
+              _hover={{
+                bg: selectedRange === range ? themeColors.primary.goldLight : themeColors.bg.card,
+              }}
+            >
+              {range}
+            </Button>
+          ))}
+        </ButtonGroup>
+
+        {/* 图表操作 */}
+        <HStack spacing={2}>
+          <Tooltip label="重置视图">
+            <Button
+              size="sm"
+              variant="ghost"
+              color={themeColors.text.secondary}
+              _hover={{ color: themeColors.primary.gold }}
+              onClick={handleReset}
+            >
+              <Icon as={FaRedo} />
+            </Button>
+          </Tooltip>
+          <Tooltip label="截图">
+            <Button
+              size="sm"
+              variant="ghost"
+              color={themeColors.text.secondary}
+              _hover={{ color: themeColors.primary.gold }}
+              onClick={handleScreenshot}
+            >
+              <Icon as={FaCamera} />
+            </Button>
+          </Tooltip>
+          <Tooltip label={isFullscreen ? '退出全屏' : '全屏'}>
+            <Button
+              size="sm"
+              variant="ghost"
+              color={themeColors.text.secondary}
+              _hover={{ color: themeColors.primary.gold }}
+              onClick={toggleFullscreen}
+            >
+              <Icon as={isFullscreen ? FaCompress : FaExpand} />
+            </Button>
+          </Tooltip>
+        </HStack>
+      </Flex>
+
+      {/* 统计数据 */}
+      <Flex
+        justify="space-around"
+        align="center"
+        bg={themeColors.bg.secondary}
+        p={3}
+        borderRadius="md"
+        borderWidth="1px"
+        borderColor={themeColors.border.default}
+        wrap="wrap"
+        gap={4}
+      >
+        <VStack spacing={0}>
+          <Text color={themeColors.text.muted} fontSize="xs">
+            最新值
+          </Text>
+          <Text color={themeColors.text.gold} fontSize="lg" fontWeight="bold">
+            {formatNumber(stats.latest)} {unit}
+          </Text>
+          <Text
+            color={stats.change >= 0 ? '#00ff88' : '#ff4444'}
+            fontSize="xs"
+            fontWeight="bold"
+          >
+            {stats.change >= 0 ? '+' : ''}
+            {formatNumber(stats.change)} ({stats.changePercent.toFixed(2)}%)
+          </Text>
+        </VStack>
+
+        <VStack spacing={0}>
+          <Text color={themeColors.text.muted} fontSize="xs">
+            平均值
+          </Text>
+          <Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
+            {formatNumber(stats.avg)} {unit}
+          </Text>
+        </VStack>
+
+        <VStack spacing={0}>
+          <Text color={themeColors.text.muted} fontSize="xs">
+            最高值
+          </Text>
+          <Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
+            {formatNumber(stats.max)} {unit}
+          </Text>
+        </VStack>
+
+        <VStack spacing={0}>
+          <Text color={themeColors.text.muted} fontSize="xs">
+            最低值
+          </Text>
+          <Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
+            {formatNumber(stats.min)} {unit}
+          </Text>
+        </VStack>
+
+        <VStack spacing={0}>
+          <Text color={themeColors.text.muted} fontSize="xs">
+            数据点数
+          </Text>
+          <Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
+            {processedData.length}
+          </Text>
+        </VStack>
+
+        <VStack spacing={0}>
+          <Text color={themeColors.text.muted} fontSize="xs">
+            频率
+          </Text>
+          <Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
+            {frequency}
+          </Text>
+        </VStack>
+      </Flex>
+
+      {/* 图表容器 */}
+      <Box position="relative">
+        <canvas
+          ref={canvasRef}
+          width={800}
+          height={500}
+          style={{
+            width: '100%',
+            height: '500px',
+            borderRadius: '6px',
+            border: `1px solid ${themeColors.border.gold}`,
+            backgroundColor: themeColors.bg.card,
+            cursor: 'crosshair',
+          }}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+        />
+
+        {/* 悬停提示 */}
+        {hoveredPoint && (
+          <Box
+            position="absolute"
+            top={2}
+            left={2}
+            bg={themeColors.bg.secondary}
+            p={2}
+            borderRadius="md"
+            borderWidth="1px"
+            borderColor={themeColors.border.gold}
+            pointerEvents="none"
+          >
+            <Text color={themeColors.text.gold} fontSize="xs" fontWeight="bold">
+              {hoveredPoint.data.date}
+            </Text>
+            <Text color={themeColors.text.primary} fontSize="sm">
+              {hoveredPoint.data.value} {unit}
+            </Text>
+          </Box>
+        )}
+      </Box>
+
+      {/* 提示信息 */}
+      <Flex justify="space-between" align="center" fontSize="xs" color={themeColors.text.muted}>
+        <HStack spacing={4}>
+          <Text>💡 提示：鼠标悬停查看详细数据</Text>
+        </HStack>
+        <Text>数据来源: {metricName}</Text>
+      </Flex>
+    </VStack>
+  );
+};
+
+export default SimpleLineChart;