Почему бы не увидеть график шириной 50 пикселей и высотой 25 пикселей - PullRequest
Новая
       27

Почему бы не увидеть график шириной 50 пикселей и высотой 25 пикселей

0 голосов
/ 25 декабря 2018

Мне нужно много очень маленьких диаграмм на одной странице, но если я установлю ширину 50px и высоту 25px, я не вижу диаграммы.Также я буду благодарен за предложения других библиотек создать более 200 диаграмм на странице без проблем с производительностью.

Я попытался установить ширину и высоту с помощью css для родительского div.

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

Я ожидаю очень маленький график, но не вижу ни одного графика.

1 Ответ

0 голосов
/ 25 декабря 2018

В Документах Chartist вы найдете все доступные опции и их значения по умолчанию.

Ваша проблема здесь в том, что по умолчанию везде есть поля и отступы, что оставляет очень малопространство для ваших данных.Вот параметры, которые вы можете использовать для удаления лишних пробелов:

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