我有一个数据集，里面有很大的数字(十亿(和很小的数字(数百万(。当我把它画在水平条形图上时，低数字似乎几乎消失了。我尝试了不同的缩放方式，但仍然找不到解决方案。
export const options = {
indexAxis: "y" as const,
elements: {
bar: {
borderWidth: 2
}
},
responsive: true,
plugins: {
legend: {
position: "right" as const
},
title: {
display: true,
text: "Chart.js Horizontal Bar Chart"
}
},
scales: {
// min: 0,
// max: 800000000000,
// stepSize: 1000000000,
x: {
ticks: {
// beginAtZero: false,
// stepSize: 1000000,
}
}
}
};
const labels = ["January", "February", "March", "April"];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: [440000000000, 3000000000, 1000000000, 880147000],
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)"
}
]
};
export function App() {
return <Bar options={options} data={data} />;
}
链接到沙箱https://codesandbox.io/s/new-dawn-hssfmf?file=/App.tsx:314-1165
如何正确缩放，使小数字的条形图正确显示，而不会几乎隐藏？
您可以使用对数刻度：
const options = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April"],
datasets: [{
label: '# of Votes',
data: [440000000000, 3000000000, 1000000000, 880147000],
backgroundColor: 'pink'
}]
},
options: {
indexAxis: 'y',
scales: {
x: {
type: 'logarithmic'
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
</script>
</body>