Chart.js

Chart.js 是一个简洁而灵活的 JavaScript 图表库，可生成具有流畅动画的清晰响应式图表。Moraya 的 Chart.js 插件让你可以通过在围栏代码块中编写标准 Chart.js 配置对象来在 Markdown 中嵌入图表。

语法

在围栏代码块上使用 chartjs 或 chart 语言标签。内容为一个包含 type、data 和可选 options 字段的 JSON 对象，符合 Chart.js 配置规范。

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{ "label": "Values", "data": [10, 20, 30] }]
  }
}
```

chartjs 和 chart 两种语言标签均可使用，效果完全相同。

示例

柱状图

展示月度用户注册数的纵向柱状图。

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [
      {
        "label": "New Signups",
        "data": [1240, 1580, 1920, 1750, 2100, 2380],
        "backgroundColor": [
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)"
        ],
        "borderColor": "rgba(54, 162, 235, 1)",
        "borderWidth": 1
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Monthly User Signups" }
    },
    "scales": {
      "y": { "beginAtZero": true }
    }
  }
}
```

水平柱状图

比较编程语言流行度的水平柱状图。

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Python", "JavaScript", "TypeScript", "Java", "Go", "Rust"],
    "datasets": [
      {
        "label": "Developer Survey (%)",
        "data": [48, 42, 35, 30, 18, 12],
        "backgroundColor": [
          "#3776ab",
          "#f7df1e",
          "#3178c6",
          "#ed8b00",
          "#00add8",
          "#ce422b"
        ]
      }
    ]
  },
  "options": {
    "indexAxis": "y",
    "plugins": {
      "title": { "display": true, "text": "Most Used Languages (2025)" },
      "legend": { "display": false }
    },
    "scales": {
      "x": { "beginAtZero": true, "max": 60 }
    }
  }
}
```

折线图

跟踪 24 小时内服务器响应时间的折线图。

```chartjs
{
  "type": "line",
  "data": {
    "labels": ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"],
    "datasets": [
      {
        "label": "Response Time (ms)",
        "data": [45, 38, 42, 120, 185, 165, 140, 72],
        "borderColor": "rgb(75, 192, 192)",
        "backgroundColor": "rgba(75, 192, 192, 0.1)",
        "fill": true,
        "tension": 0.3
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "API Response Time (24h)" }
    },
    "scales": {
      "y": { "beginAtZero": true, "title": { "display": true, "text": "ms" } }
    }
  }
}
```

饼图

展示项目时间分配的饼图。

```chartjs
{
  "type": "pie",
  "data": {
    "labels": ["Development", "Testing", "Design", "Meetings", "Documentation"],
    "datasets": [
      {
        "data": [40, 20, 15, 15, 10],
        "backgroundColor": [
          "#36a2eb",
          "#ff6384",
          "#ffce56",
          "#4bc0c0",
          "#9966ff"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Sprint Time Allocation" },
      "legend": { "position": "right" }
    }
  }
}
```

环形图

展示云基础设施成本构成的环形图。

```chartjs
{
  "type": "doughnut",
  "data": {
    "labels": ["Compute", "Storage", "Database", "Network", "Other"],
    "datasets": [
      {
        "data": [3200, 1800, 2400, 950, 650],
        "backgroundColor": [
          "#ff6384",
          "#36a2eb",
          "#ffce56",
          "#4bc0c0",
          "#c9cbcf"
        ],
        "borderWidth": 2
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Monthly Cloud Costs ($)" },
      "legend": { "position": "bottom" }
    },
    "cutout": "55%"
  }
}
```

雷达图

比较两个前端框架多个维度的雷达图。

```chartjs
{
  "type": "radar",
  "data": {
    "labels": ["Performance", "Ecosystem", "Learning Curve", "Bundle Size", "TypeScript", "Community"],
    "datasets": [
      {
        "label": "Svelte",
        "data": [95, 65, 90, 95, 85, 70],
        "borderColor": "#ff3e00",
        "backgroundColor": "rgba(255, 62, 0, 0.15)"
      },
      {
        "label": "React",
        "data": [75, 98, 60, 55, 80, 98],
        "borderColor": "#61dafb",
        "backgroundColor": "rgba(97, 218, 251, 0.15)"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Framework Comparison" }
    },
    "scales": {
      "r": { "beginAtZero": true, "max": 100 }
    }
  }
}
```

极坐标图

展示博客内容类型分布的极坐标面积图。

```chartjs
{
  "type": "polarArea",
  "data": {
    "labels": ["Tutorials", "Case Studies", "News", "Opinion", "Reviews"],
    "datasets": [
      {
        "data": [35, 22, 18, 14, 11],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.6)",
          "rgba(54, 162, 235, 0.6)",
          "rgba(255, 206, 86, 0.6)",
          "rgba(75, 192, 192, 0.6)",
          "rgba(153, 102, 255, 0.6)"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Blog Posts by Category" },
      "legend": { "position": "right" }
    }
  }
}
```

气泡图

按价格、评分和市场份额比较产品的气泡图。

```chartjs
{
  "type": "bubble",
  "data": {
    "datasets": [
      {
        "label": "Product A",
        "data": [{ "x": 29, "y": 4.5, "r": 18 }],
        "backgroundColor": "rgba(255, 99, 132, 0.6)"
      },
      {
        "label": "Product B",
        "data": [{ "x": 49, "y": 4.2, "r": 25 }],
        "backgroundColor": "rgba(54, 162, 235, 0.6)"
      },
      {
        "label": "Product C",
        "data": [{ "x": 79, "y": 4.8, "r": 12 }],
        "backgroundColor": "rgba(255, 206, 86, 0.6)"
      },
      {
        "label": "Product D",
        "data": [{ "x": 39, "y": 3.9, "r": 30 }],
        "backgroundColor": "rgba(75, 192, 192, 0.6)"
      },
      {
        "label": "Product E",
        "data": [{ "x": 99, "y": 4.6, "r": 8 }],
        "backgroundColor": "rgba(153, 102, 255, 0.6)"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Products: Price vs Rating (bubble = market share)" }
    },
    "scales": {
      "x": { "title": { "display": true, "text": "Price ($)" } },
      "y": { "title": { "display": true, "text": "Rating" }, "min": 3, "max": 5 }
    }
  }
}
```

多数据集折线图

比较三个区域收入趋势的多折线图。

```chartjs
{
  "type": "line",
  "data": {
    "labels": ["Q1 '24", "Q2 '24", "Q3 '24", "Q4 '24", "Q1 '25", "Q2 '25"],
    "datasets": [
      {
        "label": "North America",
        "data": [420, 460, 510, 480, 530, 580],
        "borderColor": "#36a2eb",
        "tension": 0.2
      },
      {
        "label": "Europe",
        "data": [310, 340, 355, 370, 395, 420],
        "borderColor": "#ff6384",
        "tension": 0.2
      },
      {
        "label": "Asia Pacific",
        "data": [180, 220, 275, 320, 380, 450],
        "borderColor": "#ffce56",
        "tension": 0.2
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Regional Revenue ($k)" }
    },
    "scales": {
      "y": { "beginAtZero": false, "title": { "display": true, "text": "$k" } }
    }
  }
}
```