如何在react-charts中更改條形圖中條形圖的寬度？

Question

我正在實施條形圖，但遇到以下問題：

有時，條形的寬度太大，看起來像與軸重疊時圖形被破壞了。 我應該遵循什么方法來根據數據控制條寬？

這是數據示例以及圖表的外觀。 我也添加了代碼沙箱。

const dataOne = [
    {
      label: Translate.string('Events'),
      data: [[2018, 3], [2019, 2], [2020, 1]],
    },
  ];

如果我需要提供任何其他信息，請告訴我。 我也在這里發布了這個問題。

Answer 1

該屬性實際上存儲在scales.xAxes （“xAxes 的選項”表）中。

所以你只需要這樣編輯你的圖表：

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

這對某些參考資料很有用，但也特別要注意這一點

Answer 2

在深入研究庫后，我發現在為bar rect元素計算CSS轉換時存在一個錯誤。

我無法找到解決此問題的完全證明的方法，但我想出了一種解決方法（在數據的開頭和結尾添加空值），這對我的用例很有效，並且可以幫助其他人解決他們的問題問題所以想到添加解決方法作為答案。

import moment from "moment";
import React from "react";
import { Chart } from "react-charts";

import "./styles.css";

export default function App() {
  const dataone = React.useMemo(
    () => [
      {
        label: "Event",
        data: [
          [moment(2010, "YYYY"), null],
          [moment(2011, "YYYY"), 3],
          [moment(2012, "YYYY"), 2],
          [moment(2013, "YYYY"), 1],
          [moment(2015, "YYYY"), 3],
          [moment(2016, "YYYY"), null]
        ]
      }
    ],
    []
  );
  const options = {
    scales: {
      xAxes: [
        {
          barPercentage: 0.4
        }
      ]
    }
  };
  const series = { type: "bar" };
  const axes = React.useMemo(
    () => [
      { primary: true, type: "time", position: "bottom" },
      { type: "linear", position: "left" }
    ],
    []
  );

  return (
    <>
      <div
        style={{
          width: "600px",
          height: "300px"
        }}
      >
        <Chart
          data={dataone}
          options={options}
          axes={axes}
          series={series}
          tooltip
        />
      </div>
    </>
  );
}