混合图表(Mixed Chart Types)

Chart.js 可以创建两个或更多不同图表类型组合的混合图表。一个常见的例子是一个条形图和折线图的结合。

创建混合图表从一个基本图表的初始化开始。

  1. var myChart = new Chart(ctx, {
  2. type: "bar",
  3. data: data,
  4. options: options
  5. });

现在我们有一个标准的条形图。现在我们需要将其中一个数据集转换为折线图数据集。

  1. var mixedChart = new Chart(ctx, {
  2. type: "bar",
  3. data: {
  4. datasets: [
  5. {
  6. label: "Bar Dataset",
  7. data: [10, 20, 30, 40]
  8. },
  9. {
  10. label: "Line Dataset",
  11. data: [50, 50, 50, 50],
  12. // 将此数据集类型变为折线图
  13. type: "line"
  14. }
  15. ],
  16. labels: ["January", "February", "March", "April"]
  17. },
  18. options: options
  19. });

如下有一个图表,呈现我们想要的信息。需要注意的是,在这种情况下折线图的默认选项不会合并。只有当type字段指定的类型时,默认类型的选项才会被合并。