我有一个图表可以正确呈现为2个散点图,我想将第一个数据集更改为条形图,但是一旦我这样做,就没有正确渲染,而是作为一条扁平线。
我的图表创建代码如下:
const chartInstance = new Chart(ctx, {
type: 'scatter',
data: chartData,
options: {
responsive: true,
maintainAspectRatio: false,
onClick: onClickChart,
scales: {
xAxes: [{
ticks: {
min: -4,
max: 4
}
}],
yAxes: [{
id: 'A',
type: 'linear',
position: 'right',
display: false,
ticks: {
min: 0,
max: 0.4
}
},
{
id: 'B',
type: 'linear',
position: 'left',
}]
}
}
});
}
然后填充数据集:
chart.datasets.push({
type: "scatter",
label: "Frequency",
data: new Array<XYPair>(),
borderColor: config.lineColors.red,
borderWidth: 1,
fill: false,
yAxisID: "B",
});
chart.datasets.push({
type: "scatter",
label: "Ideal",
data: new Array<XYPair>(),
borderColor: config.lineColors.blue,
borderWidth: 1,
fill: false,
yAxisID: "A",
});
// gauss segments
for (let val in data.segments) {
let x: XYPair = {
x: data.segments[val].label, y: data.segments[val].count
};
chart.datasets[0].data.push(x);
}
// ideal line
for (let val in data.gaussCurve) {
let x: XYPair = {
x: data.gaussCurve[val].x, y: data.gaussCurve[val].y
};
chart.datasets[1].data.push(x);
}
我的数据是X,Y对,根据文档应该有效。我使用X / Y数据来匹配线和区域之间的X轴。看来我的xAxis因为变化而搞砸了。可能是因为我没有加载任何标签? 如果是这样的话,你如何匹配来自不同集合的标签,因为一个数据集比另一个集合具有更多的潜力。