📌  相关文章
📜  角度高图-柱形图(1)

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

角度高图-柱形图

介绍

角度高图是一个基于D3.js的可交互可视化图表库，其中柱形图是其支持的一种图表类型。角度高图的柱形图可以通过绘制水平或垂直的矩形来表示数据并支持多种自定义选项。柱形图通常用于比较不同类别的数值，例如历史上两个不同的年份的销售数据。

特性
  • 支持水平和垂直柱形图
  • 可以自定义柱形颜色、段落颜色和其他样式属性
  • 通过自定义柱形宽度、高度和内边距来修改柱形图的外观
  • 提供了丰富的交互选项，支持缩放，平移和鼠标悬停事件
示例代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>角度高图-柱形图示例</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid/dist/ag-grid.min.noStyle.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      var data = [
        { category: 'A', value: 10 },
        { category: 'B', value: 20 },
        { category: 'C', value: 5 },
        { category: 'D', value: 15 },
        { category: 'E', value: 30 }
      ];

      var container = d3.select('#chart');
      var width = 600;
      var height = 400;
      var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 40
      };

      var x = d3.scaleBand()
              .range([0, width - margin.left - margin.right])
              .padding(0.1);

      var y = d3.scaleLinear()
              .range([height - margin.top - margin.bottom, 0]);

      var svg = container.append('svg')
              .attr('width', width)
              .attr('height', height)
              .append('g')
              .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      x.domain(data.map(function(d) { return d.category; }));
      y.domain([0, d3.max(data, function(d) { return d.value; })]);

      svg.selectAll('.bar')
          .data(data)
          .enter().append('rect')
          .attr('class', 'bar')
          .attr('x', function(d) { return x(d.category); })
          .attr('y', function(d) { return y(d.value); })
          .attr('width', x.bandwidth())
          .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.value); });

      svg.append('g')
          .attr('transform', 'translate(0,' + (height - margin.top - margin.bottom) + ')')
          .call(d3.axisBottom(x));

      svg.append('g')
          .call(d3.axisLeft(y));
    </script>
  </body>
</html>
效果图

角度高图-柱形图效果图

参考链接