javascript - Chart.js 具有不同比例的混合条形图和折线图

Question

我正在使用 chart.js 构建一个图表，它是一个散点类型的堆叠条形图。我的问题是条形图 x 轴上的刻度不能正确表示散点图的 x 轴刻度。在过去的几个小时里，我查看了文档并浏览了 SOF，然后想出了 This Answer ，这对于条形图有意义，而不是通过 x-y 坐标绘制的散点图。

var chartDefault = {
  type: 'bar',
  data: {
    labels: ['30', '45', '60', '90', '120', '120+'],
    datasets: [{
      type: 'bar',
      label: 'Receivable',
      data: [730, 492.5, 120, 4732.5, 2760.85, 0],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }, {
      type: 'bar',
      label: 'Past Due',
      data: [2760.85, 0, 0, 0, 0, 0],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }, {
      type: 'scatter',
      label: 'Invoice',
      data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
      xAxisID: 'invoice-time',
      yAxisID: 'invoice-amount',
      backgroundColor: 'rgba(75, 00, 150, 0.2)',
      borderColor: 'rgba(75, 00, 150,1)',
      borderWidth: 2
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Days'
        },
      }, {
        id: 'invoice-time',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Days'
        },
        ticks: {
          beginAtZero: true,
          stepSize: 1,
          suggestedMax: 125
        }
      }],
      yAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }, {
        id: 'invoice-amount',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }]
    },
  }
};
var chart = new Chart($('#creditSat'), chartDefault);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="creditSat"></canvas>

因此，如果您查看散点数据集的片段，就会发现有 11 个数据点，但只有 6 个被映射。我希望所有 11 个都被映射，我知道有一些重叠，这是有道理的。从本质上讲，这是发票的表示，您有应收账款、过期款项由条形表示，然后线上的点代表发票本身。任何帮助将不胜感激。

Answer 1

找到答案，折线图的轴需要指定类型，如下所示:

{
    id: 'invoice-time',
    type: 'linear',
    display: false,
    stacked: false,
    scaleLabel: {
      display: false,
      labelString: 'Days'
    },
    ticks: {
      beginAtZero: true,
      stepSize: 1,
      suggestedMax: 125
    }
  }

var chartDefault = {
  type: 'bar',
  data: {
    labels: ['30', '45', '60', '90', '120', '120+'],
    datasets: [{
      type: 'bar',
      label: 'Receivable',
      data: [730, 492.5, 120, 4732.5, 2760.85, 0],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }, {
      type: 'bar',
      label: 'Past Due',
      data: [2760.85, 0, 0, 0, 0, 0],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1
    }, {
      type: 'scatter',
      label: 'Invoice',
      data: [{"x":106,"y":177.7},{"x":101,"y":1},{"x":92,"y":1},{"x":88,"y":120},{"x":65,"y":4},{"x":66,"y":120},{"x":59,"y":120},{"x":36,"y":372.5},{"x":35,"y":120},{"x":29,"y":120},{"x":4,"y":185},{"x":4,"y":120},{"x":1,"y":240},{"x":1,"y":65}],
      xAxisID: 'invoice-time',
      yAxisID: 'invoice-amount',
      backgroundColor: 'rgba(75, 00, 150, 0.2)',
      borderColor: 'rgba(75, 00, 150,1)',
      borderWidth: 2
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Days'
        },
      }, {
        id: 'invoice-time',
        type: 'linear',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Days'
        },
        ticks: {
          beginAtZero: true,
          stepSize: 1,
          suggestedMax: 125
        }
      }],
      yAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }, {
        id: 'invoice-amount',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'Dollar Amount'
        },
        ticks: {
          beginAtZero: true,
        }
      }]
    },
  }
};
var chart = new Chart($('#creditSat'), chartDefault);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="creditSat"></canvas>