javascript - Chart.js 将第二行值添加到第一行

Question

我的页面上有条形图/折线图，有两条线和四个条形值。第一行是平均值，即一条直线，因此是用相同数字填充的数组。第二行具有与第一行编号无关的不同值。我认为第一行会抬高第二行？当我单击启用平均线时，第二条线会转到正确的位置。这是一个错误还是我做错了什么？这是代码:

  var ctx_bar = document.getElementById("points").getContext('2d');
var average = Array.apply(null, Array(points_order[0].length)).map(Number.prototype.valueOf,glob_pisteet[4][3]);
trows_chart = new Chart(ctx_bar, {
    type: 'bar',
    data: {
        labels: points_order[4],
        datasets: [{
            type: 'line',
            label: 'average',
            borderColor: 'rgb(50, 50, 0)',
            borderWidth: 1,
            fill: false,
            radius: 0,
            data: average
        },{
            type: 'line',
            label: 'points/trow',
            borderColor: 'rgb(255, 51, 51)',
            borderWidth: 4,
            fill: false,
            data: points_order[5]
        },{
            type: 'bar',
            label: 'first',
            backgroundColor: 'rgb(0, 92, 230)',
            stack: 'round 1',
            data: points_order[0]
        }, {
            type: 'bar',
            label: 'second',
            backgroundColor: 'rgb(102, 163, 255)',
            stack: 'round 1',
            data: points_order[1]
        }, {
            type: 'bar',
            label: 'third',
            backgroundColor: 'rgb(230, 138, 0)',
            stack: 'round 2',
            data: points_order[2]
        }, {
            type: 'bar',
            label: 'fourth',
            backgroundColor: 'rgb(255, 194, 102)',
            stack: 'round 2',
            data: points_order[3]
        }]

    },
    options: {
                title:{
                    display:true,
                    text:"Drows"
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
    }
});

Answer 1

好吧，我找到了原因:

如果您的选项设置如下:

          title:{
              display:true,
              text:"Heitot"
          },
          tooltips: {
              mode: 'index',
              intersect: false
          },
          responsive: true,
          scales: {
              xAxes: [{
                  stacked: true,
              }],
              yAxes: [{
                  stacked: true
              }]
          }

然后它就会这样做。一旦你完成这一部分:

          yAxes: [{
              stacked: true
          }]

离开或将 stacked: true 更改为 false，然后它的行为就像正常一样。