Javascript Chartjs堆叠条单个最大值

是否可以使用具有一个最大值的chartjs堆叠条

我有两个价值观。一是销售，二是销售产生的净收入

我想展示两者，但我不想在销售价值的基础上增加收入，因为这已经是它的一部分了

资料

现在它显示的是600和330，而不是保持在500和300

var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“销售”，
数据：[500300]，
背景颜色：[
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
'rgba（255,99,132,0.2）'
],
边框颜色：[
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
'rgba（255,99132,1）'
],
边框宽度：2
},
{
标签：“收入”，
数据：[100,30]，
背景颜色：[
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：2
}
]
},
选项：{
比例：{
雅克斯：[{
对,，
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
对,，
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
基本上，在图表初始化之前，您需要从第一个值中减去第二个值，这样，它就不会用组合值绘制图表

为此，您可以使用以下图表插件

plugins: [{
   beforeInit: function(c) {
      var data1 = c.data.datasets[0].data;
      var data2 = c.data.datasets[1].data;
      c.data.datasets[0].data = data1.map(function(e, i) {
         return e - data2[i];
      });
   }
}]

添加此插件，然后添加图表选项

更新

使用以下工具提示回调函数显示工具提示标签上的旧值

tooltips: {
   callbacks: {
      label: function(t, d) {
         var dst1_label = d.datasets[t.datasetIndex].label + ': ' + (+t.yLabel + d.datasets[1].data[t.index]);
         var dst2_label = d.datasets[t.datasetIndex].label + ': ' + t.yLabel;
         if (t.datasetIndex === 0) return dst1_label;
         else return dst2_label;
      }
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩


var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“销售”，
数据：[500300]，
背景颜色：[
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
"rgba(255,99,132,0.2)",，
'rgba（255,99,132,0.2）'
],
边框颜色：[
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
"rgba(255,99132,1)",，
'rgba（255,99132,1）'
],
边框宽度：2
}, {
标签：“收入”，
数据：[100,30]，
背景颜色：[
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
"rgba(255,159,64,0.2)",，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
"rgba(255,159,64,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：2
}]
},
选项：{
比例：{
雅克斯：[{
对,，
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
对,，
滴答声：{
贝吉纳泽罗：是的
}
}]
},
工具提示：{
回调：{
标签：功能（t，d）{
var dst1_label=d.datasets[t.datasetIndex].label+'：'+（+t.yLabel+d.datasets[1].data[t.index]）；
var dst2_label=d.datasets[t.datasetIndex].label+'：'+t.yLabel；
如果（t.datasetIndex==0）返回dst1_标签；
否则返回dst2_标签；
}
}
}
},
插件：[{
beforeInit：函数（c）{
var data1=c.data.datasets[0].data；
var data2=c.data.datasets[1].data；
c、 data.datasets[0]。data=data1.map（函数（e，i）{
返回e-data2[i]；
});
}
}]
});

这很完美，但是标签上会出现问题，因为销售时标签上仍然需要显示500而不是400。你是说y轴标签？但是，如果销售时将其从400改为500，那就没有意义了。销售额和收入不能都在500，它将从图表中排除收入。或者这是你想要的？销售额仍然是500，100是我们的销售收入。好吧，也许我没有正确理解你。你能分享你期望的图表吗？
tooltips: {
   callbacks: {
      label: function(t, d) {
         var dst1_label = d.datasets[t.datasetIndex].label + ': ' + (+t.yLabel + d.datasets[1].data[t.index]);
         var dst2_label = d.datasets[t.datasetIndex].label + ': ' + t.yLabel;
         if (t.datasetIndex === 0) return dst1_label;
         else return dst2_label;
      }
   }
}