图表 JS 堆叠条形组 - Javascript

堆叠条形组图是一种常用于数据可视化的图表类型，它能够帮助我们快速直观地展示多个指标之间的对比和关系。在Javascript中，我们可以利用一些优秀的图表库来轻松地制作堆叠条形组图。

1. 使用框架库实现堆叠条形组图

目前比较常用的Javascript图表库包括D3.js、ECharts、Highcharts等，这些库都提供了完备的堆叠条形组图制作方案。以下是使用ECharts实现堆叠条形组图的代码演示：

// 引入ECharts库
import echarts from 'echarts';

// 初始化图表
const chart = echarts.init(document.getElementById('chart'));

// 配置图表选项
const option = {
    legend: {
        data: ['销量', '库存']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '销量',
            type: 'bar',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '库存',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        }
    ]
};

// 将配置项设置到图表中
chart.setOption(option);

上述代码实现了一个简单的堆叠条形组图，并包含了图例、坐标轴、数据系列等各个组成部分。开发者只需按照自己的需求修改配置项即可定制出自己的图表。

2. 自定义堆叠条形组图

如果开发者需要更加精细化地控制堆叠条形组图的各个细节，可以通过自定义构建实现。以下是一个利用原生Javascript实现的堆叠条形组图示例：

// 数据
const data = [
    { category: 'A', value1: 100, value2: 200 },
    { category: 'B', value1: 110, value2: 220 },
    { category: 'C', value1: 120, value2: 240 },
    { category: 'D', value1: 150, value2: 190 },
    { category: 'E', value1: 130, value2: 230 },
    { category: 'F', value1: 140, value2: 270 }
];

// 图表设置
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// 创建SVG
const svg = d3.select('#chart')
    .append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', `translate(${margin.left}, ${margin.top})`);

// 配置x轴
const xScale = d3.scaleBand()
    .range([0, width])
    .padding(0.2)
    .domain(data.map(d => d.category));
svg.append('g')
    .attr('transform', `translate(0, ${height})`)
    .call(d3.axisBottom(xScale));

// 配置y轴
const yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, d => d.value1 + d.value2)]);
svg.append('g')
    .call(d3.axisLeft(yScale));

// 绘制矩形
svg.selectAll('.bar')
    .data(data)
    .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('x', d => xScale(d.category))
    .attr('width', xScale.bandwidth())
    .attr('y', d => yScale(d.value1))
    .attr('height', d => yScale(d.value2) - yScale(0))
    .attr('fill', '#1f77b4')
    .attr('opacity', 0.8)
    .attr('stroke', 'none');

// 绘制矩形标签
svg.selectAll('.text')
    .data(data)
    .enter()
    .append('text')
    .text(d => d.value1)
    .attr('x', d => xScale(d.category) + xScale.bandwidth() / 2)
    .attr('y', d => yScale(d.value1) - 5)
    .attr('text-anchor', 'middle')
    .attr('fill', 'white');

上述代码中，开发者可以自由定制图表的各项细节，包括数据、坐标轴、矩形、标签等。这样的自定义构建方式可以帮助开发者实现更加个性化的堆叠条形组图。

总的来说，Javascript图表库提供了非常便捷和高效的堆叠条形组图制作方案，开发者可以根据自己的需求选择相应的库进行使用，也可以通过自定义构建来更好地实现图表可视化。