c3.js供应链可视化：物流与库存数据图表

【免费下载链接】c3 :bar_chart: A D3-based reusable chart library 项目地址: https://gitcode.com/gh_mirrors/c3/c3

你还在为供应链数据的复杂性发愁吗？库存波动、物流延迟、数据分散让决策变得困难？本文将带你使用c3.js构建直观的供应链数据图表，轻松掌握库存趋势与物流效率，读完你将能够：

• 用面积图展示库存变化趋势
• 用柱状图对比不同仓库的库存水平
• 用折线图分析物流运输时间
• 用仪表盘监控关键绩效指标
• 实现图表的交互与动态更新

为什么选择c3.js进行供应链可视化

c3.js是一个基于D3.js的可重用图表库，它提供了简洁的API和丰富的图表类型，非常适合展示供应链中的各类数据。相比直接使用D3.js，c3.js简化了图表创建过程，同时保留了高度的可定制性。项目的核心文件包括c3.js和c3.css，分别负责图表的逻辑和样式。

供应链数据通常具有时间序列特性，如库存变化、运输时间等，c3.js提供了专门的时间序列处理能力。此外，它还支持数据加载、区域标记和交互功能，这些都是分析供应链数据的关键需求。

准备工作：引入c3.js库

要开始使用c3.js，首先需要在你的HTML页面中引入相关文件。推荐使用国内CDN以确保访问速度和稳定性：

<!-- 引入D3.js，c3.js依赖于此 -->
<script src="https://cdn.jsdelivr.net/npm/d3@5.8.2/dist/d3.min.js"></script>
<!-- 引入c3.js核心文件 -->
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<!-- 引入c3.js样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css">

如果你希望从源码构建或自定义，可以克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/c3/c3

项目的主要代码位于src/目录下，其中包含了各种图表类型的实现，如src/shape.bar.ts负责柱状图，src/shape.line.ts负责折线图等。

库存趋势可视化：面积图实现

库存水平随时间的变化是供应链管理中的关键指标。使用面积图可以直观展示库存的增减趋势，帮助识别季节性波动和异常情况。

基础面积图代码示例

<div id="inventory-chart"></div>
<script>
  var chart = c3.generate({
    bindto: '#inventory-chart',
    data: {
      x: 'date',
      columns: [
        ['date', '2025-01-01', '2025-01-02', '2025-01-03', '2025-01-04', '2025-01-05'],
        ['成品库存', 1200, 1900, 1500, 2800, 2200],
        ['原材料库存', 3200, 2900, 3500, 3100, 3800]
      ],
      types: {
        '成品库存': 'area',
        '原材料库存': 'area-spline'
      },
      colors: {
        '成品库存': '#3498db',
        '原材料库存': '#2ecc71'
      }
    },
    axis: {
      x: {
        type: 'timeseries',
        tick: {
          format: '%Y-%m-%d'
        },
        label: '日期'
      },
      y: {
        label: '库存数量'
      }
    },
    legend: {
      position: 'right'
    },
    tooltip: {
      format: {
        value: function(value) {
          return value + ' 件';
        }
      }
    }
  });
</script>

上述代码创建了一个展示成品和原材料库存变化的面积图。通过设置types属性为'area'和'area-spline'，我们得到了填充区域的效果，其中'area-spline'还会将数据点用平滑曲线连接。

高级特性：添加库存警戒线

在供应链管理中，常常需要设置安全库存水平。我们可以使用c3.js的区域标记功能来突出显示低于安全库存的区域：

regions: [
  {axis: 'y', start: 0, end: 1500, class: 'region-warning', label: '库存偏低'}
]

同时在CSS中定义区域样式：

.region-warning {
  fill: rgba(231, 76, 60, 0.2);
}

这个功能在src/region.ts中有详细实现，你可以通过查阅源码了解更多自定义选项。

多仓库库存对比：柱状图应用

当需要比较不同仓库或不同产品类别的库存水平时，柱状图是理想的选择。c3.js提供了灵活的柱状图配置选项，可以轻松实现分组、堆叠等效果。

分组柱状图示例

<div id="warehouse-chart"></div>
<script>
  var chart = c3.generate({
    bindto: '#warehouse-chart',
    data: {
      columns: [
        ['北京仓库', 1200, 1500, 900, 1800],
        ['上海仓库', 1900, 1300, 1600, 2200],
        ['广州仓库', 1500, 1800, 1200, 1600]
      ],
      type: 'bar',
      groups: [
        ['北京仓库', '上海仓库', '广州仓库']
      ],
      names: {
        '北京仓库': '北京',
        '上海仓库': '上海',
        '广州仓库': '广州'
      }
    },
    axis: {
      x: {
        type: 'category',
        categories: ['电子产品', '服装', '食品', '日用品'],
        label: '产品类别'
      },
      y: {
        label: '库存数量'
      }
    },
    grid: {
      y: {
        show: true
      }
    },
    bar: {
      width: {
        ratio: 0.6
      }
    }
  });
</script>

这个例子创建了一个分组柱状图，比较了三个仓库中不同产品类别的库存数量。通过设置bar.width.ratio属性，我们可以调整柱子的宽度比例，使图表更加美观。

堆叠柱状图展示库存结构

如果需要展示单个仓库中不同产品的库存占比，可以使用堆叠柱状图：

data: {
  columns: [
    ['电子产品', 1200, 1500],
    ['服装', 900, 1100],
    ['食品', 800, 700],
    ['日用品', 600, 900]
  ],
  type: 'bar',
  groups: [
    ['电子产品', '服装', '食品', '日用品']
  ],
  stack: true
}

这种图表类型在htdocs/samples/chart_bar_stacked.html中有更多示例，你可以参考这些示例来实现更复杂的库存分析图表。

物流效率分析：折线图与数据加载

监控物流运输时间的变化对于优化供应链效率至关重要。折线图可以清晰地展示运输时间的趋势，帮助识别潜在问题。

运输时间趋势分析

<div id="logistics-chart"></div>
<script>
  var chart = c3.generate({
    bindto: '#logistics-chart',
    data: {
      url: '/data/logistics_data.csv',
      mimeType: 'text/csv',
      x: 'week',
      types: {
        '运输时间': 'line',
        '延误率': 'line'
      },
      axes: {
        '延误率': 'y2'
      }
    },
    axis: {
      x: {
        label: '周'
      },
      y: {
        label: '平均运输时间(天)'
      },
      y2: {
        show: true,
        label: '延误率(%)',
        max: 100,
        min: 0
      }
    },
    point: {
      r: function(d) {
        // 根据延误率大小调整点的大小
        if (d.id === '延误率' && d.value > 10) {
          return 8;
        }
        return 4;
      }
    },
    grid: {
      y: {
        lines: [{value: 3, text: '目标运输时间'}]
      }
    }
  });
</script>

这个例子展示了如何从CSV文件加载数据并创建双Y轴折线图。左侧Y轴表示运输时间，右侧Y轴表示延误率，这样我们可以同时观察两个相关指标的变化趋势。

实时数据更新

在实际应用中，物流数据可能需要定期更新。c3.js提供了便捷的API来更新图表数据：

// 每30秒更新一次数据
setInterval(function() {
  chart.load({
    url: '/data/latest_logistics_data.csv'
  });
}, 30000);

数据加载功能在src/api.load.ts中有详细实现，支持CSV、JSON等多种数据格式，以及自动刷新等高级功能。

关键绩效指标监控：仪表盘实现

对于供应链管理中的关键绩效指标(KPI)，如订单满足率、库存周转率等，仪表盘是一种直观的展示方式。

订单满足率仪表盘

<div id="kpi-gauge"></div>
<script>
  var gauge = c3.generate({
    bindto: '#kpi-gauge',
    data: {
      columns: [
        ['订单满足率', 92]
      ],
      type: 'gauge',
      onclick: function(d, i) { console.log("onclick", d, i); },
      onmouseover: function(d, i) { console.log("onmouseover", d, i); },
      onmouseout: function(d, i) { console.log("onmouseout", d, i); }
    },
    gauge: {
      label: {
        format: function(value, ratio) {
          return value + '%';
        },
        show: true // to turn off the min/max labels.
      },
      min: 0,
      max: 100,
      units: ' %',
      width: 30,
      threshold: {
        unit: 'value',
        max: 100,
        values: [60, 80, 90],
        colors: ['#e74c3c', '#f39c12', '#3498db', '#2ecc71']
      }
    },
    color: {
      pattern: ['#e74c3c', '#f39c12', '#3498db', '#2ecc71'], // the three color levels for the percentage values.
      threshold: {
        values: [60, 80, 90]
      }
    },
    size: {
      height: 200
    }
  });
</script>

这个仪表盘展示了订单满足率指标，通过设置不同的阈值颜色，我们可以直观地判断当前指标所处的水平：红色表示差(0-60%)，黄色表示一般(60-80%)，蓝色表示良好(80-90%)，绿色表示优秀(90%以上)。

仪表盘组件的实现细节可以在src/stanford.ts和src/shape.ts中找到，这些文件包含了图表渲染的核心逻辑。

交互与动态更新：提升用户体验

c3.js提供了丰富的交互功能，可以让用户更深入地探索供应链数据：

缩放与平移

zoom: {
  enabled: true,
  type: 'wheel', // 支持鼠标滚轮缩放
  resetButton: true // 显示重置按钮
}

这个功能在src/zoom.ts中有详细实现，允许用户放大查看数据细节或缩小查看整体趋势。

动态切换数据视图

<button onclick="showMonthlyData()">月视图</button>
<button onclick="showQuarterlyData()">季度视图</button>

<script>
function showMonthlyData() {
  chart.load({
    columns: [
      ['date', '2025-01', '2025-02', '2025-03', '2025-04', '2025-05'],
      ['库存', 1200, 1900, 1500, 2800, 2200]
    ]
  });
}

function showQuarterlyData() {
  chart.load({
    columns: [
      ['date', 'Q1', 'Q2', 'Q3', 'Q4'],
      ['库存', 4600, 6500, 5800, 7200]
    ]
  });
}
</script>

通过按钮切换不同时间粒度的数据视图，用户可以从不同角度分析库存变化。这种动态数据更新功能由src/api.data.ts中的相关方法支持。

实战案例：完整供应链监控面板

结合以上介绍的各种图表类型，我们可以构建一个完整的供应链监控面板。以下是实现这个面板的关键步骤：

1. 组织HTML结构，创建多个图表容器
2. 引入必要的依赖文件：D3.js和c3.js
3. 为每个图表编写配置代码
4. 实现数据加载和更新逻辑
5. 添加响应式布局，确保在不同设备上都有良好显示

完整的实现示例可以参考htdocs/samples/chart_combination.html，这个文件展示了如何组合多种图表类型来呈现复杂数据。

总结与下一步

本文介绍了如何使用c3.js创建各种供应链数据可视化图表，包括面积图展示库存趋势、柱状图对比多仓库库存、折线图分析物流效率以及仪表盘监控关键绩效指标。通过这些图表，你可以更直观地理解供应链数据，做出更明智的决策。

要进一步提升你的供应链可视化能力，可以：

1. 探索更多图表类型，如散点图分析库存与销售的关系
2. 学习高级自定义技巧，定制符合企业品牌风格的图表
3. 结合后端数据接口，实现实时监控系统
4. 研究docs/目录中的官方文档，发现更多实用功能

c3.js的源码结构清晰，主要模块包括：

• src/api/：各类API接口定义
• src/axis/：坐标轴相关功能
• src/data/：数据处理与转换
• src/shape/：图表形状渲染
• src/tooltip/：提示框功能

通过阅读这些源码文件，你可以深入了解c3.js的工作原理，实现更复杂的可视化需求。

希望本文能帮助你更好地利用c3.js进行供应链数据可视化，提升供应链管理效率。如果你有任何问题或建议，欢迎参与项目的贡献，具体贡献指南请参考CONTRIBUTING.md。

【免费下载链接】c3 :bar_chart: A D3-based reusable chart library 项目地址: https://gitcode.com/gh_mirrors/c3/c3