Drupal 11中C3.js图表缩放及配置问题求助

一、解决“Library options”文本框缺失的问题 #

• 验证模块兼容性：确认Charts模块及C3.js Charts子模块是适配Drupal 11的最新版本，旧版本可能在Attachment显示类型下未正确渲染该表单字段。
• 临时切换显示类型：先将Attachment显示改为“Page”显示，查看是否能看到“Library options”文本框。配置好所需JSON后，再改回Attachment显示——部分场景下Attachment的表单渲染存在优先级问题。
• 手动编辑视图YAML：若界面始终不显示，直接导出视图YAML，在Attachment的格式配置中添加library_options键，填入C3.js配置JSON后重新导入。示例片段：

format:
  type: chart_c3js
  options:
    chart_type: line
    label_field: field_fecha_de_medicion
    data_fields:
      - field_valor_medido
    library_options: '{"zoom": {"enabled": true}, "grid": {"y": {"lines": [{"value": 50, "color": "red"}]}}}'

• 强制清除缓存：每次修改配置后执行drush cr，确保配置生效。

二、实现交互式缩放与水平阈值线 #

通过Library options的JSON配置直接实现需求：

1. 交互式缩放：启用拖拽+滚轮缩放功能：

{
  "zoom": {
    "enabled": true,
    "type": "drag",
    "mouseWheel": true
  }
}

2. 水平阈值线：添加y=50的红色水平线：

{
  "grid": {
    "y": {
      "lines": [
        {
          "value": 50,
          "color": "red",
          "style": "solid"
        }
      ]
    }
  }
}

将两段JSON合并后填入Library options，即可同时启用两个功能。

额外排查项 #

• 检查浏览器控制台：确认C3.js库已正常加载，无加载失败报错。
• 确认用户权限：当前编辑视图的用户需拥有“配置视图”的权限，权限不足可能导致表单字段隐藏。

内容的提问来源于stack exchange，提问作者Alberto Martínez