Question

我在一页上需要很多非常小的图表，但是如果我将宽度设置为50px，将高度设置为25px，则看不到图表。另外，我还要感谢其他图书馆在没有性能问题的情况下在页面上创建200多个图表的建议。

我尝试通过父div上的CSS设置宽度和高度。

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-chartist";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Chart
        className="chart"
        data={{
          series: [[1, 3, 2, 8, 4, 12, 27, 16]]
    }}
    type="Line"
    options={{
      fullWidth: true,
      width: "50px",
      height: "25px",
      showPoint: false,
      axisY: {
        showGrid: false,
        showLabel: false
      },
      axisX: {
        showGrid: false,
        showLabel: false
      }
    }}
  />
    </div>);
}

我希望图表很小，但是我看不到任何图表。

Answer 1

在Chartist's docs中，您会找到所有可用的选项及其默认值。

您的问题是，默认情况下到处都有边距和填充，这将为您的数据留出很少的空间。您可以使用以下选项来删除多余的空间：

https://codesandbox.io/s/4lxl0qvly9

function App() {
  // We'll use this multiple times, so declare it here
  const series = [1, 3, 2, 8, 4, 12, 27, 16];
  return (
    <div className="App">
      <Chart
        className="chart"
        data={{
          series: [series]
        }}
        type="Line"
        options={{
          fullWidth: true,
          width: "50px",
          height: "25px",
          low: Math.min(...series), // Remove space around min and max values
          high: Math.max(...series), // Remove space around min and max values
          chartPadding: {
            // Remove all padding
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
          },
          showPoint: false,
          axisY: {
            offset: 0, // Remove any offset
            position: "start", // Remove any bottom margin
            showGrid: false,
            showLabel: false
          },
          axisX: {
            offset: 0, // Remove any offset
            position: "start", // Remove any left margin
            showGrid: false,
            showLabel: false
          }
        }}
      />
    </div>
  );
}

为什么看不到宽度50px和高度25px的图表

1 个答案: