chart.js ajax 折线图,Chart.js具有不同比例的混合条形图和折线图

我正在使用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);

因此，如果您查看散点图数据集的片段，则会有11个数据点，但只会映射6个数据点 . 我希望所有11个都被映射，我知道有一些重叠，这是有道理的 . 基本上这是发票的表示，您有应收款，过期由柱表示，然后线上的点代表发票本身 . 任何帮助将非常感激 .