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

Question

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

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

https://codesandbox.io/s/m5pl96l8op

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>
  );
}