Chart.js 两个xAxes水平条形图Charts.js

我正在努力使用charts.js和双轴水平条形图获得正确的xAxis设置。JsFiddle链接如下。问题是我试图在同一张图表中显示两个不同的刻度。一个是高数字（价格），另一个是低数字（数量）

我在选项属性中使用第二个x轴，但标签显示为月份，而不是数量！如何显示数量

<canvas id="myChart" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myChart');
var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "# Deals",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [15, 19, 5, 16, 1, 12, 8],
      xAxisID:'x1',
  }, {
    label: "$Money",
    backgroundColor: "rgba(55,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 1,
    hoverBackgroundColor: "rgba(55,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [265, 459, 320, 181, 456, 555, 1040]
  }]
};
var option = {
    scales: {
      yAxes: [{
        gridLines: {
          display: true,
          color: "rgba(255,99,132,0.2)"
        }
      }],
      xAxes: [{
          id: 'x1',
          gridLines: {
            display: false
          }},
          {
            id: 'x2',
            gridLines: {
              display: false
            }
          }]
      }
    };
    var ctx = document.getElementById("myChart").getContext('2d');

    var myBarChart = new Chart(ctx, {
      type: 'horizontalBar',
      data: data,
      options: option
    });
</script>

var canvas=document.getElementById（'myChart'）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“交易”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边界宽度：2，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：[15,19,5,16,1,12,8]，
xAxisID:'x1'，
}, {
标签：“$Money”，
背景色：“rgba（55,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边框宽度：1，
hoverBackgroundColor:“rgba（55,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：[265459320301814565551040]
}]
};
var选项={
比例：{
雅克斯：[{
网格线：{
显示：对，
颜色：“rgba（255,99132,0.2）”
}
}],
xAxes：[{
id:'x1'，
网格线：{
显示：假
}},
{
id:'x2'，
网格线：{
显示：假
}
}]
}
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myBarChart=新图表（ctx{
键入：“水平线”，
数据：数据，
选项：选项
});

ꜰɪʀꜱᴛ

为第二个数据集设置

xAxisID:'x2'

，如下所示：

datasets: [{
      ...
   }, {
      label: "$Money",
      backgroundColor: "rgba(55,99,132,0.2)",
      borderColor: "rgba(255,99,132,1)",
      borderWidth: 1,
      hoverBackgroundColor: "rgba(55,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      data: [265, 459, 320, 181, 456, 555, 1040],
      xAxisID: 'x2',
   }]

ꜱᴇᴄᴏɴᴅ

设置第二个x轴的

类型：'linear'

和

位置：'bottom'

，如下所示：

xAxes: [{
         ...
      }, {
         id: 'x2',
         type: 'linear',
         position: 'bottom',
         gridLines: {
            display: false
         }
      }]

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

var canvas=document.getElementById（'myChart'）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“交易”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边界宽度：2，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：[15,19,5,16,1,12,8]，
xAxisID:'x1'，
}, {
标签：“$Money”，
背景色：“rgba（55,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边框宽度：1，
hoverBackgroundColor:“rgba（55,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：[265459320301814565551040]，
xAxisID:'x2'，
}]
};
var选项={
比例：{
雅克斯：[{
网格线：{
显示：对，
颜色：“rgba（255,99132,0.2）”
}
}],
xAxes：[{
id:'x1'，
网格线：{
显示：假
}
}, {
id:'x2'，
类型：'线性'，
位置：'底部'，
网格线：{
显示：假
}
}]
}
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myBarChart=新图表（ctx{
键入：“水平线”，
数据：数据，
选项：选项
});