Blazor中如何借助Chart.js实现含堆叠柱状图的复杂分组数据图表？

不用强行适配第三方封装的Chart组件库，直接通过JS互操作调用原生Chart.js是灵活度最高的方案，你可以直接复用已经写好的原生Chart.js配置，不需要额外适配组件库的封装规则。

• 第一步：引入Chart.js资源
  将下载好的Chart.js静态资源放入wwwroot/js目录，在Blazor应用的入口页（WebAssembly项目为wwwroot/index.html，Server项目为Pages/_Layout.cshtml/Pages/_Host.cshtml）的body标签末尾添加引用：

  <script src="./js/chart.umd.min.js"></script>
  

• 第二步：封装JS互操作方法
  在wwwroot/js目录下新建chartInterop.js文件，写入图表初始化和更新的通用方法：

  export function initChart(canvasId, config) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    // 直接接收原生Chart.js配置，无需任何格式转换
    window[`chart_instance_${canvasId}`] = new Chart(ctx, config);
  }
  
  export function updateChartData(canvasId, newData) {
    const targetChart = window[`chart_instance_${canvasId}`];
    if (!targetChart) return;
    targetChart.data = newData;
    targetChart.update();
  }
  

• 第三步：在Blazor页面中调用实现图表
  页面中放置canvas容器，注入JS运行时完成图表初始化，你可以直接把自己写好的原生Chart.js配置传入即可，以下为堆叠多组柱状图的示例代码：

  @inject IJSRuntime JSRuntime
  @implements IAsyncDisposable
  
  <h3>市场调研数据堆叠图</h3>
  <canvas id="market_research_chart" width="900" height="500"></canvas>
  
  @code {
      private IJSObjectReference? _chartJsModule;
      private const string ChartId = "market_research_chart";
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (firstRender)
          {
              // 加载自定义的JS互操作模块
              _chartJsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/chartInterop.js");
              
              // 此处配置完全和原生Chart.js写法一致，你可以直接替换为自己已经写好的复杂配置
              var chartConfig = new
              {
                  type = "bar",
                  data = new
                  {
                      labels = new[] {"华东区域", "华南区域", "华北区域", "西南区域", "西北区域"},
                      datasets = new[]
                      {
                          new { label = "品牌A认知度", data = new[] {62, 49, 71, 38, 26}, backgroundColor = "#FF6B6B", stack = "awareness" },
                          new { label = "品牌B认知度", data = new[] {35, 52, 27, 46, 39}, backgroundColor = "#4ECDC4", stack = "awareness" },
                          new { label = "品牌A购买意愿", data = new[] {28, 19, 32, 15, 11}, backgroundColor = "#FFD166", stack = "intention" },
                          new { label = "品牌B购买意愿", data = new[] {17, 24, 12, 22, 16}, backgroundColor = "#6A0572", stack = "intention" }
                      }
                  },
                  options = new
                  {
                      responsive = true,
                      scales = new
                      {
                          X = new { stacked = true },
                          Y = new { stacked = true }
                      }
                      // 其余自定义配置：Tooltip样式、图例交互、插件配置等全部和原生写法一致
                  }
              };
  
              await _chartJsModule.InvokeVoidAsync("initChart", ChartId, chartConfig);
          }
      }
  
      // 从API拉取新数据后调用该方法即可更新图表，无需重绘
      private async Task RefreshChartData(object newApiData)
      {
          if (_chartJsModule != null)
          {
              await _chartJsModule.InvokeVoidAsync("updateChartData", ChartId, newApiData);
          }
      }
  
      // 页面销毁时释放资源避免内存泄漏
      public async ValueTask DisposeAsync()
      {
          if (_chartJsModule != null)
          {
              await _chartJsModule.DisposeAsync();
          }
      }
  }
  

• 如果你仍想使用第三方组件库，Radzen、Blazorise的图表组件均支持透传原生Options参数，你可以把自己写好的原生Chart.js复杂配置直接赋值给对应参数，也能实现需求，只是灵活度略低于直接调用原生接口。
• 所有复杂交互、自定义插件都可以直接复用你已有的原生Chart.js代码，不需要做额外的适配改造。

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