基于SignalR、.NET Core(C#)实现动态实时柱状图的选型咨询

首选方案：Apache ECharts #

• 技术栈适配：纯原生JS实现，无前端框架依赖，和你当前.NET Core MVC + 原生JS的开发模式完全匹配，不需要额外引入第三方前端框架
• 实时更新能力：原生支持增量数据合并更新，无需全量重载图表。收到SignalR推送的消息时，仅需调用setOption方法传入变更的数据片段，即可自动触发对应元素的平滑动画，完全适配高实时性推送场景，高频更新下无卡顿
• 原生满足所有功能要求：
  • 支持X轴类目动态增删，增删过程中已有柱体自动触发平滑移位动画
  • 支持单个柱体数值动态更新，柱高变化自带过渡效果
  • 内置横向滚动交互，当X轴条目数量超出画布宽度时自动启用滚动，不需要额外开发
• 核心实现逻辑：
  1. 图表初始化阶段配置空的X轴类目数组，分别配置「已处理任务数」「错误记录数」两个系列的空数据数组，开启内置的横向dataZoom组件支持滚动
  2. 绑定SignalR服务启动消息回调：收到消息后向X轴类目数组追加对应服务名称，两个数据系列分别追加初始值0，调用setOption触发新增条目的入场动画
  3. 绑定SignalR计数更新消息回调：根据服务标识找到对应的数据索引，直接修改对应系列下该索引的数值，调用setOption触发柱高变化的平滑过渡
  4. 绑定SignalR服务完成消息回调：从X轴类目数组、两个数据系列数组中移除对应索引的条目，调用setOption触发条目移除、剩余柱体移位的动画

配置提示：调用setOption时保持默认的合并更新模式（不要开启notMerge参数），该模式下渲染性能最优，可支持每秒十次以上的高频更新。

备选方案：Chart.js 搭配动画扩展插件 #

• 优势：库体积比ECharts更小，同样为原生JS无依赖实现
• 适配注意点：原生版本对数值增量更新支持良好，但类目增删的平移动画效果较生硬，需要搭配官方动画扩展插件配置类目移位的过渡效果，横向滚动能力需要结合自定义外层容器实现，整体开发成本略高于ECharts，适合对前端包体积有严格限制的场景。

不推荐方案说明 #

• D3.js：灵活度极高但所有图表元素、交互、动画都需要手动从零实现，开发成本过高，不适配当前快速落地的需求
• Highcharts：商业场景使用需要支付授权费用，高频更新下的动画流畅度弱于ECharts
• 各类基于React/Vue封装的图表组件：和当前原生JS技术栈不适配，引入额外框架的改造成本过高

优化提示 #

• 所有更新逻辑直接绑定SignalR的消息接收事件即可，不需要额外加轮询拉取逻辑，端到端延迟可控制在50ms以内，完全满足实时展示要求
• 如果单秒内收到的计数更新消息超过20次，可以加一层100ms的节流处理，合并短时间内的多次数值更新，进一步降低渲染开销
• 默认配置下的动画效果和参考的实时柱状图效果完全一致，柱体递增、条目增删的平滑度不需要额外调优即可满足需求

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