"Options" 的柱形图未在反应中应用。我还需要将宽度和高度设置为 div 的 100%

Question

相同的代码在 codesandbox 中工作，但在用作反应组件时不采用“选项”。

选项未应用于图表。需要更改栏的宽度并且 canvas 需要为空白。

    import React from 'react'
    import { Bar } from 'react-chartjs-2';
    
    
    const data = {
      labels: ["80", "20", "30", "40", "35"],
      datasets: [
        {
          label: "",
          data: [999, 266, 466, 800, 200],
          backgroundColor: "blue"
        }
      ]
    };
    /* This is part which is not working*/
    const options = {
      responsive: false,
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false,
              drawBorder: false,
              borderDash: [3, 3],
              zeroLineColor: "blue"
            },
            categoryPercentage: 0.4,
            barPercentage: 0.3,
            ticks: {
              beginAtZero: true
            }
          }
        ],
        yAxes: [
          {
            display: false,
            gridLines: {
              display: false,
              zeroLineColor: "transparent"
            },
            ticks: {
              beginAtZero: true
            }
          }
        ]
      }
    };
    
    
    const VerticalBar = () => {
    
      return (
        <div className="verticalBar">
      /*When I change width and height to 100% it displays very small 
        version of graph*/
        <Bar width="200" height="200" data={data} options={options} />
       
        
        </div>
      )
    }
    
    export default VerticalBar

以下是我在 codesandbox 中创建的图表，它在我的相同环境中运行良好：

import React from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";

// import "./styles.css";

function App() {
  const data = {
    labels: [10, 20, 30, 40, 35],
    datasets: [
      {
        label: "",
        data: [999, 266, 466, 800, 200],
        backgroundColor: "blue"
      }
    ]
  };

  const options = {
    responsive: false,
    scales: {
      xAxes: [
        {
          gridLines: {
            display: false,
            drawBorder: false,
            borderDash: [3, 3],
            zeroLineColor: "blue"
          },
          categoryPercentage: 0.4,
          barPercentage: 0.3,
          ticks: {
            beginAtZero: true
          }
        }
      ],
      yAxes: [
        {
          display: false,
          gridLines: {
            display: false,
            zeroLineColor: "transparent"
          },
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Bar width="306" height="260" data={data} options={options} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我的实际代码中需要第二个图像结果。希望尽快得到回复。

Answer 1

这是因为 chart-js 的版本。您想要实现的第二张图片使用了 chart-js 2.8.0 和 react-chartjs-2 2.7.6。但是在您当前使用的第一张图片中使用了 chart-js 3.5.0 和 react-chartjs-2 3.0.4。所以如果你坚持使用和第二张图一样的chart-js，你可以用这些命令降级包：

npm install chart-js@2.8.0
npm install react-chartjs-2@2.7.6

"Options" 的柱形图未在反应中应用。我还需要将宽度和高度设置为 div 的 100%

"Options" of column chart not getting applied in react .Also I need to set width and height to 100% of div

graph

options

width

reactjs