# 混合图表

URL: https://caijiao.org/chartjs/06-advanced/01-mixed-chart
Source: docs/chartjs/06-advanced/01-mixed-chart.md
Description: 展示如何使用 Chart.js 创建混合图表，在同一个图表中组合多种图表类型，如柱状图与折线图，共同展示多维数据。

[Chart.js](/chartjs/) 支持在同一张图表中混合不同类型的图形展示，例如柱状图结合折线图。这在展示多个数据维度时非常有用，比如比较销售总量与平均增长趋势。

创建混合图表的方式是将不同类型的数据集添加到 `datasets` 数组中，并分别设置 `type` 属性。下面的示例展示了柱状图与折线图的组合。

```js
(function () {
  const ctx = document.getElementById("mixedChart").getContext("2d");

  new Chart(ctx, {
    data: {
      labels: ["一月", "二月", "三月", "四月", "五月"],
      datasets: [
        {
          type: "bar",
          label: "销售额",
          data: [50, 60, 70, 180, 190],
          backgroundColor: "rgba(75, 192, 192, 0.6)",
        },
        {
          type: "line",
          label: "增长率",
          data: [3, 4, 5, 10, 12],
          borderColor: "rgb(255, 99, 132)",
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          fill: false,
          tension: 0.4,
          yAxisID: "y1",
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true },
      },
      scales: {
        y: {
          type: "linear",
          position: "left",
          title: { display: true, text: "销售额" },
        },
        y1: {
          type: "linear",
          position: "right",
          grid: { drawOnChartArea: false },
          title: { display: true, text: "增长率 (%)" },
        },
      },
    },
  });
})();
```

[在线代码演示](/chartjs/demos/20.html)