javascript - 为什么看不到宽度 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>
  );
}