ChartJS 混合图表

定义和使用

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

示例

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

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

var myChart = new Chart(ctx, {
  type: "bar",
  data: data,
  options: options
});

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

var mixedChart = new Chart(ctx, {
  type: "bar",
  data: {
      datasets: [
          {
              label: "Bar Dataset",
              data: [10, 20, 30, 40]
          },
          {
              label: "Line Dataset",
              data: [50, 50, 50, 50],

              // 将此数据集类型变为折线图
              type: "line"
          }
      ],
      labels: ["January", "February", "March", "April"]
  },
  options: options
});

尝试一下

ChartJS 混合图表

定义和使用

示例