如何在chart-js中的两个比例之间添加空格？

问题描述

我有一个折线图，其中在 y 轴上有一些从 0 到 x 的数字。由于数字彼此非常接近，我需要在它们之间添加一些空格。我看不到在图表 js 中设置它的选项。我在使用 react-chartjs 的反应中使用这个图表 js

import React from 'react';
import styled from 'styled-components';
import { Line } from 'react-chartjs-2';

const data = {
  labels: ['1','2','3','4','5','6'],datasets: [
    {
      label: '',data: [120,100,250,180,380,276,190,420],fill: false,backgroundColor: 'rbg(255,255,255)',borderColor: '#62C8C8',borderWidth: 3,},],};

const options = {
  legend: {
    display: false,elements: {
    point: {
      radius: 0,scales: {
    xAxes: [
      {
        gridLines: {
          drawOnChartArea: false,tickMarkLength: 0,ticks: {
          padding: 10,yAxes: [
      {
        gridLines: {
          display: false,ticks: {
          beginAtZero: true,stepSize: 100,padding: 10,};

const LineChart = () => (
    <Line data={data} options={options} />
);

export default LineChart;

解决方法

您可以做两件事，增加画布高度，使图表有更多的空间来显示，以便轴可以显示更多，您还可以更改为 lib 的第 3 版，您可以在其中设置 {{1} } 动态计算，因此它提供更少的滴答声，因此它们之间的空间更大

示例：

stepSize

var options = {
  type: 'line',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
        label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
      },{
        label: '# of Points',data: [7,11,8,7],borderWidth: 1
      }
    ]
  },options: {
    scales: {
      y: {
        ticks: {
          stepSize: (c) => ((Math.max(...c.chart.data.datasets[0].data) - Math.min(...c.chart.data.datasets[0].data)) / 2)
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);

charts react-chartjs