Chart.js 将两个系列放在相同的比例上答案

【问题标题】：Chart.js place both series on same scaleChart.js 将两个系列放在相同的比例上
【发布时间】：2016-05-09 06:05:13
【问题描述】：

所以我有一个包含两个系列的 chart.js 图表。一个是条形图，另一个是折线图。

S1 = 71,166,2,6,8

S2 = 6,2,4,8,5

当我绘制它们时，它们都以自己的比例出现，这使得条形图和折线图有点毫无意义。

我需要一种方法以相同的比例绘制两个图表。

有没有办法在 chart.js 中做到这一点？如果没有，你会怎么做？

谢谢。

    var barChartData = {
    labels: dataLabels,
        datasets: [{
            type: 'bar',
              label: "Actual",
                data: dataActual,
                fill: false,
                backgroundColor: '#71B37C',
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C',
                yAxisID: 'y-axis-2'
        }, {
            label: "Maximum",
                type:'line',
                data: dataMaximum,
                fill: false,
                borderColor: '#EC932F',
                backgroundColor: '#EC932F',
                pointBorderColor: '#EC932F',
                pointBackgroundColor: '#EC932F',
                pointHoverBackgroundColor: '#EC932F',
                pointHoverBorderColor: '#EC932F',
                yAxisID: 'y-axis-1'
        } ]
    };

$(function () {
    if (theChart !== undefined) {
        theChart.destroy();
    } 
      var ctxActualVsMax = document.getElementById("myChart2").getContext("2d");

      theChart = new Chart(ctxActualVsMax, {
          type: 'bar',
          data: barChartData,
          options: {
              responsive: true,
              tooltips: {
                  mode: 'label'
              },
              elements: {
                  line: {
                      fill: false
                  }
              },
              scales: {
                  xAxes: [{
                      display: true,
                      gridLines: {
                          display: false
                      },
                      labels: {
                          show: true,
                      }
                  }],
                  yAxes: [{
                      type: "linear",
                      display: true,
                      position: "left",
                      id: "y-axis-1",
                      gridLines:{
                          display: false
                      },
                      labels: {
                          show:true,

                      }
                  }, {
                      type: "linear",
                      display: false,
                      position: "right",
                      id: "y-axis-2",
                      gridLines:{
                          display: false
                      },
                      labels: {
                          show:true,

                      }
                  }]
              }
          }
      });


  });

【问题讨论】：

你写的代码是什么？问候

标签： chart.js2

【解决方案1】：

在您的代码中，您已指定两个数据集使用不同的yAxisId。只需将它们都设置为相同，您还可以从options 中删除未使用的yAxes 对象

fiddle

【讨论】：

嗨，我有一个问题，我需要第二个轴，因为我想要一个未堆叠的线和一个堆叠的条，所以我无法合并这些轴，但我仍然需要它们处于相同的比例并且在同一个地方有 0 ....
小提琴链接坏了。