Javascript 如果只存在总宽度和一些坐标的数组，则获取适当的x和宽度

关于增强部分的问题

我有一张图表，在图表后面我想用条纹覆盖整个背景。 图表上有垂直线，可以直观地划分条纹

所以我有下一个数据： 1） 画布的总宽度，假设为600 2） 画布上x坐标的数组，假设有类似于

[100250300600]

我需要得到每个条纹的宽度和下一个点。我可以通过以下代码生成它们：

let linesArray = [100,250,300,500]; 
linesArray.unshift(0);
let totalWidth = 500;
let stripes = linesArray.map((x, i) => {
let width = (i === 0) ? linesArray[i+1] : linesArray[i+1] !== undefined ? linesArray[i+1] - x : totalWidth - x;

return <rect x={x} width={width }></rect>
})

让linesArray=[100250300500]；
linesArray.unshift（0）；
总宽度=500；
设条纹=linesArray.map（（x，i）=>{
设width=（i==0）？linesArray[i+1]：linesArray[i+1]！==未定义？linesArray[i+1]-x:totalWidth-x；
返回
})

---

但说真的，我不喜欢这个样子，也许有更好的解决方案来达到预期的效果

您的代码中有一个小错误。在第5行的表达式

width-x

中，您可能想到的是背景的总宽度。让我们称之为

totalWidth

。那么您的代码可以是：

let totalWidth = 1000;

let linesArray = [100,250,300,500]; 
linesArray.unshift(0);

let stripes = linesArray.map((x, i) => {
    let width = linesArray[i+1] ? linesArray[i+1] - x - 1 : totalWidth - x;

    return <rect x={x} width={width}></rect>
})

让totalWidth=1000；
设linesArray=[100250300500]；
linesArray.unshift（0）；
let stripes=linesArray.map（（x，i）=>{
设width=linesArray[i+1]？linesArray[i+1]-x-1:totalWidth-x；
返回
})

---

编辑：添加-1以确保条纹不重叠

哦，抱歉，在示例中忘记指定此变量。是的，您的代码正在运行，每个条带只会覆盖前一行的宽度，因此我还可以指定条带的颜色，它会运行，非常感谢如果您喜欢，请接受它作为正确答案；）@ConstantineGolubok，这是一个很好的短期替代方案，但也有一个缺点。如果我给线条添加不透明度，它将无法正常工作，因为其他线条旁边的线条重叠且颜色混合。无论如何，我喜欢你的版本！；）啊，你说得对！它们确实重叠。我更改了代码，从内部条纹的长度中减去1。它们现在不应该重叠@君士坦丁堡俱乐部