我在chart.js中使用条线混合图表。我只是想从0开始图,但它是从另一个值开始。可以将xAxes标签移到左侧,因为从此折线图开始的条形图永远不会从0开始,也不会从0开始。我只是想从0开始折线图。
var chart2 = new Chart(ctx2, {
type: "bar",
data: {
labels: [20, 15, 16, 78, 45],
datasets: [
{
type: 'bar',
label: 'Expenses',
data: ["", 11, 55, 56, 56],
},
{
type: "line",
label: 'Assets',
data: [12, 120, 566, 56, 21],
}
]
},
options: {
// stepSize: 10,
legend: {
display: false,
},
scales: {
xAxes: [
{
barThickness: 5,
ticks: {
maxTicksLimit: 8,
minTicksLimit: 3,
beginAtZero: true,
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
borderDash: [8, 4]
},
scaleLabel: {
display: true,
labelString: 'Retirement Assets ($)'
},
ticks: {
beginAtZero: true,
// stepSize: 200000,
scaleBeginAtZero: true,
maxTicksLimit: 10,
minTicksLimit: 5,
callback: function (value) {
var ranges = [{
divider: 1e6,
suffix: 'M'
},
{
divider: 1e3,
suffix: 'k'
}
];
tooltips: {
intersect: false,
callbacks: {
enabled: true,
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + retiremnetAssests(yLabel);
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ':' + retiremnetAssests(yLabel);
},
// label: function (tooltipItem) {
// console.log(chart2.type);
// return ("Assets" + retiremnetAssests(Number(tooltipItem.yLabel)));
// },
labelTextColor: function (tooltipItem, chart) {
return '#fff';
},
title: function (tooltipItem, data) {
return (" At age:" + tooltipItem[0].xLabel);
}
},
},
title: {
display: true,
text: 'Age (Years)',
position: 'bottom'
}
},
animation: {
duration: 1000
}
});