已使用CanvasJS环形图中间标题，如何添加顶部标题？

嘿，这个问题很常见，我来给你捋清楚怎么弄～CanvasJS其实已经提供了原生配置或者灵活的自定义方式来实现这个需求，下面给你两种贴合不同场景的方案：

方案1：官方推荐的原生配置（最简洁） #

如果之前你是通过修改title的position属性来把标题放在中间，其实更合适的做法是拆分使用官方提供的专属配置：

• 用图表默认的title设置顶部标题（它默认就显示在图表顶部区域）
• 用环形图专属的centerLabel配置中间的标题

直接上可运行的代码示例：

window.onload = function() {
  let chart = new CanvasJS.Chart("chartContainer", {
    // 顶部标题配置
    title: {
      text: "月度销售总览", // 替换成你的顶部标题文本
      fontSize: 18,
      fontColor: "#2c3e50",
      fontWeight: "bold",
      margin: 15 // 可调整标题与图表内容的间距
    },
    data: [{
      type: "doughnut",
      // 环形图中间标题配置
      centerLabel: {
        text: "总销售额\n$120k", // 支持换行显示多行文本
        fontSize: 22,
        fontColor: "#34495e",
        fontFamily: "Arial"
      },
      dataPoints: [
        { y: 45, label: "电子产品" },
        { y: 30, label: "服装" },
        { y: 25, label: "家居用品" }
      ]
    }]
  });
  chart.render();
};

这种方式完全遵循官方设计，兼容性和后续维护性都最好，是优先推荐的方案。

方案2：用自定义注解添加顶部标题（适合特殊布局） #

如果你因为现有代码的限制，必须保留当前中间的title设置，那可以通过annotations功能添加一个自定义文本作为顶部标题，实现更灵活的布局：

window.onload = function() {
  let chart = new CanvasJS.Chart("chartContainer", {
    // 自定义顶部标题注解
    annotations: [{
      type: "text",
      text: "年度品类占比分析", // 替换成你的顶部标题文本
      x: "center", // 水平居中对齐
      y: 35, // 调整此值控制标题与顶部的距离
      fontSize: 18,
      fontColor: "#2c3e50",
      fontWeight: "bold"
    }],
    // 你原来的中间标题配置
    title: {
      text: "占比分布",
      position: "center",
      fontSize: 20
    },
    data: [{
      type: "doughnut",
      dataPoints: [
        { y: 40, label: "A类" },
        { y: 35, label: "B类" },
        { y: 25, label: "C类" }
      ]
    }]
  });
  chart.render();
};

这种方式可以完全自定义标题的位置、样式，甚至添加多个文本元素，适合有特殊布局需求的场景。

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