Javascript 图表中的堆叠混合水平条形图。Js轴定位

我正在尝试在Charts.js 3.2.0中创建混合堆叠水平条形图和折线图

预期行为：堆叠条形图底部有一个轴，包括轴标题，折线图顶部有一个轴

实际行为：底部的所有轴显示一个额外的轴，该轴似乎与任何数据集都不对应。没有显示轴标题

注意：代码中有几个条的值为零值，根据生成的数据，这些条可以是非零值

我的代码：

<canvas id="myChart" width="400" height="400"></canvas>

<script>
  var ctx = document.getElementById("myChart").getContext("2d");
  var myChart = new Chart(ctx, {

    data: {
      labels: ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", ],
      datasets: [{
          type: "line",
          label: "Earnings",
          xAxisID: "A1",
          data: [10000, 20000, 30000, 5000]
        },

        {
          label: "CAT 1",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(255,59,59, 0.2)"],
          borderColor: ["rgba(255,59,59, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 2",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(241,85,54, 0.2)"],
          borderColor: ["rgba(241,85,54, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 3",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(235,106,55, 0.2)"],
          borderColor: ["rgba(235,106,55, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 4",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(227,131,53, 0.2)"],
          borderColor: ["rgba(227,131,53, 1)"],
          borderWidth: 1,
          data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
        },

        {
          label: "CAT 5",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(221,171,54, 0.2)"],
          borderColor: ["rgba(221,171,54, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 0, 0, 0, ]
        },

        {
          label: "CAT 6",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(218,199,52, 0.2)"],
          borderColor: ["rgba(218,199,52, 1)"],
          borderWidth: 1,
          data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
        },

        {
          label: "CAT 7",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(192,224,66, 0.2)"],
          borderColor: ["rgba(192,224,66, 1)"],
          borderWidth: 1,
          data: [0, 0, 0, 14.921666666667, 0, 0, ]
        },

        {
          label: "CAT 8",
          xAxisID: "B1",
          type: "bar",
          backgroundColor: ["rgba(124,236,93, 0.2)"],
          borderColor: ["rgba(124,236,93, 1)"],
          borderWidth: 1,
          data: [40.216666666667, 0, 0, 0, 0, 0, ]
        },



      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      indexAxis: "y",
      scales: {
        x: [

          {
            display: true,
            position: "top",
            type: "linear",
            title: {
              text: "cost",
              display: true,
            },
            beginAtZero: true,
            id: "A1",


          },
          {
            id: "B1",
            position: "bottom",
            title: {
              text: "hours",
              display: false,
            },
            beginAtZero: true

          }
        ],

        y: {
          display: true,
          stacked: true,
          //beginAtZero: true
        }
      }
    }
  });

</script>

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
数据：{
标签：[“第1人”、“第2人”、“第3人”、“第4人”、“第5人”、“第6人”、]，
数据集：[{
键入：“行”，
标签：“收入”，
xAxisID：“A1”，
数据：[10000、20000、30000、5000]
},
{
标签：“1类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（255,59,59,0.2）”，
边框颜色：[“rgba（255,59,59,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第2类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（241,85,54,0.2）”，
边框颜色：[“rgba（241,85,54,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第3类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（235106,55,0.2）”，
边框颜色：[“rgba（235106,55,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第4类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（227131,53,0.2）”，
边框颜色：[“rgba（227131,53,1）”，
边框宽度：1，
数据：[0,0,32.012778,0,0,29.378611111，]
},
{
标签：“第5类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（221171,54,0.2）”，
边框颜色：[“rgba（221171,54,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第6类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（218199,52,0.2）”，
边框颜色：[“rgba（218199,52,1）”，
边框宽度：1，
数据：[0,44.195556,0,0,38.79,0，]
},
{
标签：“第7类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（192224,66,0.2）”，
边框颜色：[“rgba（192224,66,1）”，
边框宽度：1，
数据：[0,0,0,14.9216666667,0,0，]
},
{
标签：“第8类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（124236,93,0.2）”，
边框颜色：[“rgba（124236,93,1）”，
边框宽度：1，
数据：[40.2166667,0,0,0,0,0，]
},
]
},
选项：{
回答：是的，
MaintaintAspectRatio:false，
索引：“y”，
比例：{
x:[
{
显示：对，
位置：“顶部”，
类型：“线性”，
标题：{
文本：“成本”，
显示：对，
},
贝吉纳泽罗：是的，
id:“A1”，
},
{
id:“B1”，
位置：“底部”，
标题：{
文字：“小时”，
显示：假，
},
贝吉纳泽罗：是的
}
],
y:{
显示：对，
对,，
//贝吉纳泽罗：是的
}
}
}
});

---

在v3中，x轴和y轴不再是数组，所有比例都是一个对象，您可以使用

position

参数定义位置，也可以不在对象中指定id，但对象键是id

例如：

var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
数据：{
标签：[“第1人”、“第2人”、“第3人”、“第4人”、“第5人”、“第6人”、]，
数据集：[{
键入：“行”，
标签：“收入”，
xAxisID：“A1”，
数据：[10000、20000、30000、5000]
},
{
标签：“1类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（255,59,59,0.2）”，
边框颜色：[“rgba（255,59,59,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第2类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（241,85,54,0.2）”，
边框颜色：[“rgba（241,85,54,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第3类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（235106,55,0.2）”，
边框颜色：[“rgba（235106,55,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第4类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（227131,53,0.2）”，
边框颜色：[“rgba（227131,53,1）”，
边框宽度：1，
数据：[0,0,32.012778,0,0,29.378611111，]
},
{
标签：“第5类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（221171,54,0.2）”，
边框颜色：[“rgba（221171,54,1）”，
边框宽度：1，
数据：[0,0,0,0,0,0,0，]
},
{
标签：“第6类”，
xAxisID：“B1”，
输入：“酒吧”，
背景颜色：[“rgba（218199,52,0.2）”，
边框颜色：[“rgba（218199,52,1）”，
边框宽度：1，