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

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 中，您会找到所有可用的选项及其默认值。

您的问题是默认情况下到处都有边距和填充，这使得您的数据所剩无几 space。以下是您可以用来删除任何额外内容的选项 space:

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 的图表

Why don't see chart of width 50px & height 25px

javascript

chartist.js