如何在ChartJS/react-chartjs-2中正确缩放较大的数字

zujrkrfu  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(184)

我有一个数据集,其中有很大的数字(十亿)和很小的数字(百万)。当我将它绘制在水平条形图上时,小数字似乎几乎消失了。我尝试了不同的缩放方法,但仍然找不到解决方案。

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
如何正确缩放,使小数字的条形正确显示,而不是几乎被隐藏?

相关问题