Javascript Chartjs 2-具有相同y轴的同一图表上的堆叠条和未堆叠线

我已经开始使用chart.js v2的最新beta版，因为我需要在同一个图表上绘制一个包含堆叠条形图和未堆叠折线图的图表。下面是我需要的一个例子：

在该图表中，线条没有堆叠，所有线条都显示其自然值，但条形图是堆叠的，并显示了值的总和（包括一些负值）

我已经设法把两张图表画在一起，但到目前为止，我只成功地将两张图表叠在一起，或者我不得不使用两个单独的y轴，最终得到两个刻度。这里有一个单独y轴的示例：

如果我去掉第一个y轴，那么我就得到了一个单一的刻度，唯一的问题是折线图现在也是堆叠的

---

有什么方法可以使用chart.js绘制我需要的图表吗？

您可以通过将不同的

yAxisID

（例如

yAxisID:“条形堆叠”

）设置到每个数据集，然后添加第二个

选项.scales.yAxes

对象来获得此功能。因此，您可以将其作为数据集：

{
  label: 'Promoters',
  backgroundColor: "#aad700",
  yAxisID: "bar-stacked",
  data: [
    50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54
  ]
}

然后，您将添加一个额外的yax（第一个是行数据集的集合[no

yAxisId

，在下面的示例中]，第二个是您想要堆叠的所有条）：

完整示例如下：

堆叠横条图
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
var barChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
数据集：[{
数据：[
50, 30, 60, 70, 80, 90, 95, 70, 90, 20, 60, 95
],
键入：“行”，
标签：“今年”，
填充：假，
背景颜色：“fff”，
边框颜色：“70cbf4”，
borderCapStyle:“butt”，
borderDash:[]，
borderDashOffset:0.0，
borderJoinStyle:'斜接'，
线张力：0.3，
pointBackgroundColor:#fff“，
pointBorderColor:#70cbf4“，
点边界宽度：1，
点半径：5，
pointHoverBackgroundColor:#70cbf4“，
pointHoverBorderColor:#70cbf4“，
pointHoverBorderWidth:2，
点半径：4，
点半径：10
}, {
数据：[
25, 40, 30, 70, 60, 50, 40, 70, 40, 80, 30, 90
],
键入：“行”，
标签：“去年”，
填充：假，
背景颜色：“fff”，
边框颜色：“#7373”，
borderCapStyle:“butt”，
borderDash:[10,10]，
borderDashOffset:0.0，
borderJoinStyle:'斜接'，
线张力：.3，
pointBackgroundColor:#fff“，
pointBorderColor:#7373“，
点边界宽度：1，
点半径：5，
pointHoverBackgroundColor:#7373“，
pointHoverBorderColor:#7373“，
pointHoverBorderWidth:2，
点半径：4，
点半径：10
}, {
标签：“发起人”，
背景颜色：“aad700”，
yAxisID：“条形y轴”，
数据：[
50, 44, 52, 62, 48, 58, 59, 50, 51, 52, 53, 54
]
}, {
标签：'被动'，
背景色：“ffe100”，
yAxisID：“条形y轴”，
数据：[
20, 21, 24, 25, 26, 17, 28, 19, 20, 11, 22, 33
]
}, {
标签：“诽谤者”，
背景颜色：“ef0000”，
yAxisID：“条形y轴”，
数据：[
30, 35, 24, 13, 26, 25, 13, 31, 29, 37, 25, 13
]
}]
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
标题：{
显示：对，
文本：“Chart.js条形图-堆叠”
},
工具提示：{
模式：“标签”
},
回答：是的，
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
错,，
滴答声：{
贝吉纳泽罗：是的，
分:0,，
最高：100
}
}, {
id:“条y轴”，
对,，
显示：false，//可选
滴答声：{
贝吉纳泽罗：是的，
分:0,，
最高：100
},
类型：“线性”
}]
}
}
});
};

这里的另一个答案-您可以为要累积的数据设置“堆栈”标识符（即，仅条形），并关闭线形图上的“填充”，以将其绘制为直线而不是山脉

---

您可以在条形数据集上设置stacked属性，使线不堆叠。 试着这样做：

 data: {
      datasets: [{
        label: 'Line 1',
        data: [],
        backgroundColor: '#3788d8cc',
        borderColor: '#3788d8cc',
        fill: false
      }, {
        label: 'Stacked bar 1',
        data: [],
        backgroundColor: '#e51c23',
        borderColor: '#e51c23',
        type: 'bar',
        stack: 'bar-stacked'
      }, {
        label: 'Line 2',
        data: [],
        backgroundColor: '#ff9800',
        borderColor: '#ff9800',
        fill: false
      },
      {
        label: 'Stacked bar 2',
        data: [],
        type: 'bar',
        backgroundColor: '#3f51b5',
        borderColor: '#3f51b5',
        stack: 'bar-stacked'
      }],
      labels: [],
    },
    options: {
      maintainAspectRatio: false,
      legend: {
        display: true
      },
      scales: {
        xAxes: [{
          display: true
        }],
        yAxes: [{
          display: true
        }]
      }
    }

---

有用的答案，但如果你不硬编码最小和最大刻度，那么你的直线和堆叠条在图表上的同一位置将不会有0…是的，如果你想让两个y轴的比例相同，那么拥有两个y轴是非常棘手的-请参阅我链接的其他答案，以更好地解决这个问题有没有一种方法可以同步y轴范围，而不需要强制最小/最大值？

yAxes: [{
  stacked: false,
  ticks: {
    beginAtZero: true,
    min: 0,
    max: 100
  }
}, {
  id: "bar-stacked",
  stacked: true,
  display: false, //optional if both yAxes use the same scale
  ticks: {
    beginAtZero: true,
    min: 0,
    max: 100
  },
  type: 'linear'
}]

 data: {
      datasets: [{
        label: 'Line 1',
        data: [],
        backgroundColor: '#3788d8cc',
        borderColor: '#3788d8cc',
        fill: false
      }, {
        label: 'Stacked bar 1',
        data: [],
        backgroundColor: '#e51c23',
        borderColor: '#e51c23',
        type: 'bar',
        stack: 'bar-stacked'
      }, {
        label: 'Line 2',
        data: [],
        backgroundColor: '#ff9800',
        borderColor: '#ff9800',
        fill: false
      },
      {
        label: 'Stacked bar 2',
        data: [],
        type: 'bar',
        backgroundColor: '#3f51b5',
        borderColor: '#3f51b5',
        stack: 'bar-stacked'
      }],
      labels: [],
    },
    options: {
      maintainAspectRatio: false,
      legend: {
        display: true
      },
      scales: {
        xAxes: [{
          display: true
        }],
        yAxes: [{
          display: true
        }]
      }
    }