📌  相关文章
📜  基本面积图 - Javascript (1)

📅  最后修改于: 2023-12-03 15:08:08.251000             🧑  作者: Mango

基本面积图 - Javascript

面积图是一种用于表现数据分布的图表类型。它可以显示每个数据点对整体的贡献，以及在一段时间内的变化趋势。在Javascript中，我们可以使用一些开源的库来创建基本面积图。

使用D3.js创建面积图

D3.js是一个非常流行的Javascript数据可视化库，它可以创建可定制的基本面积图。

安装D3.js

您可以使用npm来安装D3.js。在命令行中运行以下命令：

npm install d3
创建HTML元素

在HTML文件中创建一个SVG元素，它将成为我们绘制面积图的画布。例如：

<body>
  <svg id="chart"></svg>
</body>
绘制面积图

使用D3.js，我们可以轻松地从数据源中创建基本面积图。

// 导入数据
const data = [
  { year: 2010, value: 10 },
  { year: 2011, value: 20 },
  { year: 2012, value: 15 },
  { year: 2013, value: 25 },
  { year: 2014, value: 30 },
];

// 创建画布
const svg = d3.select('#chart')
  .append('svg')
  .attr('width', 500)
  .attr('height', 300);

// 创建比例尺
const xScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.year))
  .range([0, 500]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([300, 0]);

// 绘制面积图
const area = d3.area()
  .x(d => xScale(d.year))
  .y0(yScale(0))
  .y1(d => yScale(d.value))
  .curve(d3.curveLinear);

svg.append('path')
  .datum(data)
  .attr('class', 'area')
  .attr('d', area)
  .attr('fill', 'steelblue')
  .attr('opacity', 0.5);
示例

如需完整的样例，请参阅下面的代码块：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3.js Area Chart Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    .area {
      stroke: steelblue;
      stroke-width: 2;
    }
  </style>
</head>

<body>
  <svg id="chart"></svg>
  <script>
    // 导入数据
    const data = [
      { year: 2010, value: 10 },
      { year: 2011, value: 20 },
      { year: 2012, value: 15 },
      { year: 2013, value: 25 },
      { year: 2014, value: 30 },
    ];

    // 创建画布
    const svg = d3.select('#chart')
      .append('svg')
      .attr('width', 500)
      .attr('height', 300);

    // 创建比例尺
    const xScale = d3.scaleLinear()
      .domain(d3.extent(data, d => d.year))
      .range([0, 500]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .range([300, 0]);

    // 绘制面积图
    const area = d3.area()
      .x(d => xScale(d.year))
      .y0(yScale(0))
      .y1(d => yScale(d.value))
      .curve(d3.curveLinear);

    svg.append('path')
      .datum(data)
      .attr('class', 'area')
      .attr('d', area)
      .attr('fill', 'steelblue')
      .attr('opacity', 0.5);
  </script>
</body>
</html>
结语

基本面积图是一种灵活且易读的数据可视化工具。使用Javascript中的开源库，您可以创建高度定制的面积图。