23、网页图表创建指南

网页图表创建指南

在网页开发中，创建各种类型的图表是一项常见且重要的任务。本文将介绍如何使用相关工具和技术创建不同类型的网页图表，包括柱状图、直方图、力导向图等，并实现图表的交互功能。

1. NVD3与数据处理基础

NVD3要求数据采用特定格式。我们需要创建数据适配器函数，以及创建和配置特定图表的函数。通过调用 webviz/create-chart 函数，我们可以填充HTML元素并显示图表。 create-chart 函数接受以下参数：
- 加载数据的URL
- 创建图表的元素路径
- 创建图表的函数
- 将数据转换为点和组的函数

该函数利用这些参数请求数据、创建图表并将数据与之关联。

以下是一些相关工具的链接：
- D3官网： http://d3js.org/
- NVD3官网： http://nvd3.org/
- 替代方案C2： http://keminglabs.com/c2/

2. 使用NVD3创建柱状图

柱状图适用于比较数据集中不同类别数据的总和或计数。下面以比较四种不同饮食喂养的小鸡体重为例，介绍创建柱状图的步骤。

2.1 准备工作