如何解决javascript中间隔开的折线图y轴网格线
我有一个画布对象和一些数据。画布可以具有任何高度,因此y轴可以具有任何高度。我希望水平网格线尽可能远,这样网格线就不会被挤压在一起了……但还要根据我的数据以5或10或100的增量(不是距离,而是它们代表的值)给定的。
所以说我有
data = [["nathan",39],["jill",10]]
和329像素的y高度(画布线高度)
y网格线的每个增量可以是1px,代表1岁,但这意味着a)线将全部被压扁,并且所有值实际上都将接近y轴的底部...并非最合适。
最理想的是脚本是否可以返回以下数组:place nNumberOfLines,nDistanceApart和eachPxRepresentsHowManyUnits
我想我正在尝试建立最适合的图形..但是我被卡住了。
chart.drawGridLines = () => {
// we know the max height... round down to nearest 10?
let lowTen = Math.floor( chart.statsY.height / 10) * 10;
let howManyBlocks = lowTen/10;
let heighestValue = 39; // highest value grabbed from data manually at the moment
let increments = heighestValue/howManyBlocks;
increments = Math.ceil( increments / 1) * 1;
let realDistance = lowTen/howManyBlocks;
console.log(howManyBlocks,increments,realDistance);
for(var i=0;i<howManyBlocks;i++)
{
const maxHeight = chart.height - (2*chart.padding);
let y = chart.padding+ (i*realDistance);
const maxWidth = chart.width - (2*chart.padding);
let x2 = chart.padding + maxWidth; // both start and end
Line.draw(chart.ctx,chart.padding-10,y,x2,"#cccccc");
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。