← 返回首页

D3折线图Web Component演示

基本配置

边距配置

动画配置

数据生成

关键点配置

关键刻度点配置

使用指南

本演示页面展示了D3折线图Web Component的主要功能和配置选项。您可以通过以下步骤来体验组件的各种特性：

  1. 生成数据 - 在"数据生成"区域，选择数据点数量和数据类型，然后点击"生成数据"按钮。您可以选择正弦波、随机数据、线性增长或大数值数据。
  2. 调整基本配置 - 在"基本配置"区域，您可以修改折线颜色、是否显示阴影、网格线颜色等参数，然后点击"应用格式化"按钮查看效果。
  3. 自定义边距 - 在"边距配置"区域，您可以调整图表的上、右、下、左边距，以便为坐标轴和标签提供足够的空间，然后点击"应用边距"按钮查看效果。
  4. 设置动画效果 - 在"动画配置"区域，您可以启用或禁用动画效果，并调整动画时长，然后点击"应用配置"按钮。
  5. 添加关键点 - 在"关键点配置"区域，设置关键点数量，然后点击"生成关键点"按钮，在折线上显示特殊标记点。
  6. 添加关键刻度点 - 在"关键刻度点配置"区域，设置关键刻度点数量，然后点击"生成关键刻度点"按钮，在X轴上显示自定义刻度标签。

您可以随时点击"重置配置"按钮恢复默认设置。

使用示例代码

<!-- 引入D3.js -->
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

<!-- 引入d3-line-chart -->
<script src="path/to/d3-line-chart.min.js"></script>

<!-- 在HTML中使用组件 -->
<d3-line-chart id="chart"></d3-line-chart>

<script>
  // 获取图表实例
  const chart = document.getElementById('chart');
  
  // 设置数据
  chart.setData([
    { x: 0, y: 10 },
    { x: 1, y: 15 },
    { x: 2, y: 8 },
    { x: 3, y: 20 },
    { x: 4, y: 12 }
  ]);
  
  // 设置配置
  chart.setConfig({
    lineColor: '#3498db',
    showShadow: true,
    gridColor: '#e0e0e0',
    enableAnimation: true,
    animationDuration: 1000,
    axisTextColor: '#333333',
    axisTextSize: '12px',
    margin: {
      top: 20,
      right: 30,
      bottom: 40,
      left: 50
    }
  });
  
  // 设置关键点
  chart.setKeyPoints([
    { x: 1, y: 15, render: '<div style="background-color: red; width: 10px; height: 10px; border-radius: 50%;"></div>' },
    { x: 3, y: 20, render: '<div style="background-color: green; width: 10px; height: 10px; border-radius: 50%;"></div>' }
  ]);
  
  // 设置关键刻度点
  chart.setKeyTicks([
    { x: 0, label: '开始' },
    { x: 2, label: '中间' },
    { x: 4, label: '结束' }
  ]);
</script>