Blazer gem自定义扩展雷达图、环形饼图等图表类型的实现方法问询

前置说明 #

Blazer 2.4.2 底层基于 Chart.js 实现图表渲染，所有图表逻辑都封装在前端资源文件中，无需修改 gem 源码，通过 Rails 自带的资源覆盖机制即可完成自定义扩展。

具体实现步骤 #

• 第一步：覆盖 Blazer 前端资源

  Rails 会优先加载项目内 app/assets/javascripts/blazer 目录下的同名文件，替代 gem 自带的资源。首先将 gem 包中 app/assets/javascripts/blazer 目录下的 charts.js 文件复制到你项目的同路径下，后续所有修改都在这个本地文件中操作。

• 第二步：新增环形饼图支持
  饼图本身是 Chart.js 原生支持的类型，只需新增类型判断分支、添加镂空配置即可。找到 charts.js 中处理 pie 图表的代码块，新增如下逻辑：

  // 在原有pie类型判断逻辑后新增
  if (chartType === "donut") {
    config.type = "pie";
    config.options.cutout = "60%"; // 可自定义环形镂空比例
  }
  

  随后找到 Blazer 支持的图表类型列表数组，将 donut 加入数组，图表类型切换下拉框就会出现环形饼图选项。
• 第三步：新增雷达图支持
  Chart.js 原生支持 radar 类型，直接新增对应适配逻辑即可：
  首先在图表类型列表数组中加入 radar，再新增类型判断分支：

  if (chartType === "radar") {
    config.type = "radar";
    // 适配Blazer返回的数据结构，第一列为系列名，后续列为雷达维度
    const labels = blazerData.columns.slice(1);
    const datasets = blazerData.rows.map(row => {
      return {
        label: row[0],
        data: row.slice(1),
        fill: true,
        backgroundColor: `rgba(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, 0.2)`,
        borderColor: `rgba(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, 1)`
      }
    });
    config.data.labels = labels;
    config.data.datasets = datasets;
    // 可按需调整雷达图刻度、轴线等样式，和Chart.js配置完全兼容
    config.options.scales = {
      r: {
        beginAtZero: true
      }
    }
  }
  

• 第四步：生产环境预编译适配
  生产环境部署前，需要在 app/assets/config/manifest.js 中添加配置，确保覆盖的资源被正常预编译：

  //= link blazer/charts.js
  

  重启 Rails 服务后即可生效。

验证适配说明 #

• 雷达图要求查询返回的第一列为系列名称，后续每一列对应雷达的一个维度，行数据对应每个系列在各维度的数值
• 环形饼图的查询数据结构和原有饼图完全一致，切换类型即可直接渲染
• 如需修改配色、交互逻辑等参数，直接调整上述代码中的配置项即可

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