Plotly JS独立元素百分比堆叠柱状图性能优化及替代方案问询

我用Plotly JS绘制百分比堆叠柱状图，每个柱子的元素完全独立，不同柱子的元素数量可能不一样，最多要支持200个柱子、每个柱子50个元素，而且每个元素得单独设置颜色。当前实现把每个元素作为单独trace处理，当把柱子数量改成200时，性能明显下降、内存占用过高。

现在要解决两个问题：

1. 用Plotly JS实现这类图表有没有更高效的方式？
2. 有没有其他性能更好的JS绘图库能实现这个需求？

更新说明 #

需要给每个元素设置自定义HTML hovertemplate，同时传递mybar和myelement两个字符串变量，方便点击元素时调用函数使用这两个变量。相关代码示例如下：
定义hover模板：

const hovertemplate = `<b>My HTML hover bar${b} element${e} grade ${grade}</b><extra></extra>`;

为每个trace添加：

mybar: `mybar${b}`,
myelement: `myelement${e}`,
hovertemplate: hovertemplate

点击事件示例：

document.getElementById('myDiv').on('plotly_click', function (data) {
    myFunction(data.points[0].data.mybar, data.points[0].data.myelement);
});

一、Plotly JS的优化方案 #

1. 合并同柱子元素为单个trace（自定义堆叠逻辑） #

你当前性能问题的核心是trace数量爆炸（200个柱子×50个元素=10000个trace），Plotly处理大量trace会严重消耗内存和渲染性能。可以把每个柱子的所有元素合并成一个trace，手动计算堆叠偏移量实现效果：

• 对每个柱子，先计算元素的百分比占比，累加得到每个元素的堆叠起始高度（base属性）
• 每个柱子对应一个trace，用数组存储该柱子所有元素的占比、颜色、自定义数据，大幅减少trace数量（最多200个）

示例代码思路：

// 假设数据结构：bars = [{elements: [{value: 10, color: '#xxx', mybar: 'xxx', myelement: 'xxx', grade: 'A'}]}]
const traces = bars.map((bar, barIndex) => {
    const total = bar.elements.reduce((sum, el) => sum + el.value, 0);
    let currentBase = 0;
    const y = [];
    const base = [];
    const colors = [];
    const customdata = [];
    
    bar.elements.forEach(el => {
        const percent = (el.value / total) * 100;
        y.push(percent);
        base.push(currentBase);
        colors.push(el.color);
        customdata.push({mybar: el.mybar, myelement: el.myelement, grade: el.grade});
        currentBase += percent;
    });
    
    return {
        type: 'bar',
        x: Array(bar.elements.length).fill(barIndex),
        y: y,
        base: base,
        marker: {color: colors},
        customdata: customdata,
        hovertemplate: `<b>My HTML hover bar%{customdata.mybar} element%{customdata.myelement} grade %{customdata.grade}</b><extra></extra>`,
        showlegend: false
    };
});

Plotly.newPlot('myDiv', traces, {
    barmode: 'relative',
    yaxis: {title: '百分比', range: [0, 100]}
}, {scrollZoom: false, editable: false});

点击事件获取变量的方式调整为：

document.getElementById('myDiv').on('plotly_click', function (data) {
    const {mybar, myelement} = data.points[0].customdata;
    myFunction(mybar, myelement);
});

2. 其他Plotly优化细节 #

• 使用plotly.js-dist-min替代完整包，减少加载体积
• 关闭不必要的交互功能（如缩放、编辑）
• 禁用元素图例，减少渲染开销

二、性能更优的替代绘图库 #

1. Chart.js #

• 优势：轻量高效，对大数据量渲染优化到位，API简洁
• 实现方式：用堆叠柱状图，将同一柱子的元素归为一个dataset，通过stack属性分组，自定义每个数据点的颜色；用tooltip.callbacks配置hover模板，onClick事件获取自定义数据
• 适合场景：追求轻量、易上手，常规图表需求

2. D3.js #

• 优势：完全自定义渲染，无上层封装开销，对超大数据量的控制精度最高
• 实现方式：手动计算元素位置、高度，用Canvas或SVG绘制，自定义hover和点击逻辑；Canvas渲染模式能大幅提升大数据量下的性能
• 适合场景：需要高度自定义，对性能要求极致，愿意投入更多开发时间

3. ApexCharts #

• 优势：兼顾性能和易用性，内置大数据量优化，交互功能丰富
• 实现方式：支持堆叠柱状图，可配置每个数据点的颜色、hover模板，点击事件可直接获取自定义数据
• 适合场景：需要完整交互功能，不想做过多底层开发

内容的提问来源于stack exchange，提问作者synaptik