如何解决如何在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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。