0

我有一个使用 Chart.js 的未堆叠折线图组合图的堆叠条形图。我需要堆叠条和未堆叠线出现在同一轴上。我似乎无法做到这一点，所以我将它们放在不同的轴上，以便一个可以堆叠而另一个不能（例如，将产能线覆盖在不同零件的生产上）。但是，如果它们必须在不同的轴上，那么我需要它们具有相同的比例。我找不到一种方法来强制轴自动具有相同的比例，所以我不得不尝试计算我自己的比例并将它们设置为那个。这并不理想，如果我可以使用设置来强制他们使用相同的比例，我会更喜欢。这可能吗？

这是一个与我基本相同问题的帖子：Chart.js 将两个系列放在相同的比例上唯一的区别是我需要堆叠我的条形系列，这会阻止我使用相同的轴。

4

1 回答 1

2

我可能会误解您要执行的操作，但是可以创建一个堆叠条形图，该条形图在同一轴上具有未堆叠的折线图组合。

这是一个示例配置，展示了如何处理它。

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'line',
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [5, 3, 4, 10, 8, 9, 2]
    }, {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: window.chartColors.red,
      stack: 'Stack 0',
      data: [2, 4, 1, 3, 7, 3, 6],
      borderColor: 'white',
      borderWidth: 2
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: window.chartColors.green,
      stack: 'Stack 0',
      data: [7, 2, 4, 5, 6, 4, 2]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales: {
      xAxes: [{
        stacked: true,
      }]
    }
  }
});

这也是一个有效的codepen 示例。

于 2017-03-14T19:43:35.223 回答