两个xAxes水平条形图Charts.js

Question

我正在努力通过Charts.js和两轴水平条形图获得正确的xAxis设置。JsFiddle链接在下面。麻烦的是，我试图在同一张图表中显示两个不同的比例。一个是高数字（价格），另一个是低数字（数量）。

https://jsfiddle.net/clevelandbuckeye/Luaf2tm4/533/

我在options属性中使用了第二个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>

Answer 1

??????

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',
   }]

??????

设置type: 'linear'和position: 'bottom'作为第二个x轴，如下所示：

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

??????? ？X？？？？？？

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',
   }]

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