Javascript Chartjs堆叠条每x值有一个堆栈id 我想制作一个图表，其中差异数据集总是填充两个其他数据集之间的空白。但我遇到的问题是，我可以为每个数据集设置堆栈id，但不能为每个日期设置堆栈id。我希望有另一种方法来实现我想要的。我希望它看起来像，但由于堆栈id应用于整个数据集，差异数据集位于较高的数据点之上_Javascript_Chart.js

Javascript Chartjs堆叠条每x值有一个堆栈id 我想制作一个图表，其中差异数据集总是填充两个其他数据集之间的空白。但我遇到的问题是，我可以为每个数据集设置堆栈id，但不能为每个日期设置堆栈id。我希望有另一种方法来实现我想要的。我希望它看起来像，但由于堆栈id应用于整个数据集，差异数据集位于较高的数据点之上

javascript chart.js

Javascript Chartjs堆叠条每x值有一个堆栈id 我想制作一个图表，其中差异数据集总是填充两个其他数据集之间的空白。但我遇到的问题是，我可以为每个数据集设置堆栈id，但不能为每个日期设置堆栈id。我希望有另一种方法来实现我想要的。我希望它看起来像，但由于堆栈id应用于整个数据集，差异数据集位于较高的数据点之上,javascript,chart.js,Javascript,Chart.js,下面是我的代码，其中包含已使用php插入的数据库值，因此您有一些示例值：这是我的JavaScript部分： function ConvertMinutes(num) { d = Math.floor(num / 1440); // 60*24 h = Math.floor((num - (d * 1440)) / 60); m = Math.round(num % 60); if (d > 0) { return (d + " Tage, "

下面是我的代码，其中包含已使用php插入的数据库值，因此您有一些示例值：这是我的JavaScript部分：

function ConvertMinutes(num) {
  d = Math.floor(num / 1440); // 60*24
  h = Math.floor((num - (d * 1440)) / 60);
  m = Math.round(num % 60);

  if (d > 0) {
    return (d + " Tage, " + h + " Stunden, " + m + " Minuten");
  } else if (h > 0) {
    return (h + " Stunden, " + m + " Minuten");
  } else {
    return (m + " Minuten");
  }
}

var myChart = document.getElementById("myChart").getContext("2d");
var chart = new Chart(myChart, {
  type: 'bar',
  data: {
    labels: ['2021-01-26', '2021-01-27', '2021-01-28', '2021-01-29', '2021-01-30', '2021-01-31', '2021-02-01', '2021-02-02', '2021-02-03', '2021-02-04', '2021-02-05', ],
    datasets: [{
      label: "Emil",
      backgroundColor: 'rgb(255, 0, 0)',
      data: [
        716, 755, 1681, 890, 482, 494, 753, 364, 832, 889, 702,
      ],
      stack: 2
    }, {
      label: "Luis",
      backgroundColor: 'rgb(0, 0, 255)',
      data: [
        716, 974, 1006, 1133, 551, 638, 663, 288, 754, 0, 45,
      ],
      stack: 1
    }, {
      label: "Differenz",
      backgroundColor: 'rgb(0,255,0)',
      data: [
        0, 219, 675, 243, 69, 144, 90, 76, 78, 889, 657,
      ],
      stack: 2,
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Onlinezeit der letzten 10 Tage im Vergleich'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
      callbacks: {
        label: function(t, d) {
          var data1 = parseInt(d.datasets[0].data[t.index]);
          var label1 = d.datasets[0].label;
          var data2 = parseInt(d.datasets[1].data[t.index]);
          var label2 = d.datasets[1].label;
          var proz = 0.0;
          if (data1 > data2) {
            proz = Math.round(((data1 - data2) / data1) * 100, 2);
          } else {
            proz = Math.round(((data2 - data1) / data2) * 100, 2);
          }
          if (t.datasetIndex === 0) {
            if (data1 >= data2) {
              return label1 + ": " + ConvertMinutes(data1) + " (+" + proz + "%)";
            } else {
              return label1 + ": " + ConvertMinutes(data1) + " (-" + proz + "%)";
            }
          } else if (t.datasetIndex === 1) {
            if (data2 >= data1) {
              return label2 + ": " + ConvertMinutes(data2) + " (+" + proz + "%)";
            } else {
              return label2 + ": " + ConvertMinutes(data2) + " (-" + proz + "%)";
            }
          } else {
            return d.datasets[t.datasetIndex].label + ": " + proz + "% (" + d.datasets[t.datasetIndex].data[t.index] + "min)";
          }
        },
        /*labelTextColor:function(t, c){
            console.log(t);
            console.log(c.config.data.datasets[t.datasetIndex].data[t.index]);
        }*/
      }
    },
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          //macht es so, dass der Graph bei 0 anfängt
          beginAtZero: true,
          //stepSize: 1,
          callback: function(value, index, values) {
            return value + " min";
          }
          //max: 4
        },
        //stacked: true
      }]
    },
  }
});

这是我的html：

<!DOCTYPE html>
<html>
    <head>
        <title>Vergleich zwischen: <?php echo $userdata[$cldbids[0]]["name"] . " & " . $userdata[$cldbids[1]]["name"];?></title>
    </head>
    <body>
        <div class="container b" style="width: 1200px; margin-left:auto; margin-right:auto;">
            <canvas id="myChart"></canvas>
        </div>
    </body>
</html>


Vergleich zwischen：

提前感谢。

您可以使用两个不同的数据集来处理差异，如下面修改的代码所示

函数转换分钟数（num）{
d=数学地板（num/1440）；//60*24
h=数学楼层（（num-（d*1440））/60）；
m=数学四舍五入（数值%60）；
如果（d>0）{
返回（d+“Tage”、+h+“Stunden”、+m+“Minuten”）；
}如果（h>0），则为else{
返回（h+“眩晕”，“m+”分钟）；
}否则{
返回值（m+“分钟”）；
}
}
var myChart=document.getElementById（“myChart”）.getContext（“2d”）；
var图表=新图表（myChart{
类型：'bar'，
数据：{
标签：['2021-01-26'，'2021-01-27'，'2021-01-28'，'2021-01-29'，'2021-01-30'，'2021-01-31'，'2021-02-01'，'2021-02-02'，'2021-02-03'，'2021-02-04'，'2021-02-05'，]，
数据集：[{
标签：“埃米尔”，
背景颜色：“rgb（255,0,0）”，
数据：[
716, 755, 1681, 890, 482, 494, 753, 364, 832, 889, 702,
],
堆栈：2
}, {
标签：“路易斯”，
背景颜色：“rgb（0,0,255）”，
数据：[71697410061113355163866337288754,0,45]，
堆栈：1
}, {
标签：“Differenz”，
背景颜色：“rgb（0255,0）”，
数据：[0,219,0,243,69,144,0,0,0,0,0]，
堆栈：2，
},
{
标签：“Differenz”，
背景颜色：“rgb（0255,0）”，
数据：[0,0675,0,0,0,90,76,78889657]，
堆栈：1，
}
],
},
选项：{
标题：{
显示：对，
文字：“网上10台我是Vergleich”
},
图例：{
标签：{
过滤器：legendItem=>legendItem.datasetIndex<3
}
},
工具提示：{
模式：“索引”，
交集：错，
回调：{
标签：功能（t，d）{
var data1=parseInt（d.datasets[0].data[t.index]）；
var label1=d.datasets[0]。标签；
var data2=parseInt（d.datasets[1].data[t.index]）；
var label2=d.datasets[1]。标签；
var-proz=0.0；
var min=0；
如果（数据1>数据2）{
proz=数学舍入（（数据1-数据2）/数据1）*100,2）；
最小值=数据1-数据2；
}否则{
proz=数学舍入（（数据2-数据1）/数据2）*100,2）；
最小值=数据2-数据1；
}
if（t.datasetIndex==0）{
如果（数据1>=数据2）{
返回标签1+“：“+ConvertMinutes（data1）+”（+“+proz+”%）”；
}否则{
返回标签1+“：“+ConvertMinutes（data1）+”（“+proz+”%）”；
}
}else if（t.datasetIndex==1）{
如果（数据2>=数据1）{
返回标签2+“：“+ConvertMinutes（data2）+”（+“+proz+”%）”；
}否则{
返回标签2+“：“+ConvertMinutes（data2）+”（“+proz+”%）”；
}
}else if（t.datasetIndex==2&&data1=data2）{
返回未定义；
}否则{
返回d.datasets[t.datasetIndex].label+“：“+proz+”%（“+min+”min）”；
}
}
}
},
回答：是的，
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
返回值+最小值；
}
},
}]
},
}
});