Lightningchart 从一个X轴到另一个X轴绘制直线

我想画一条从一个x轴到另一个x轴的线，可能吗

现在我能看到的只有一条不变的线，但它在整页中画的是水平线

  const axis = chart.getDefaultAxisX();
  const line = axis.addConstantLine(false).setMouseInteractions(false);

有没有其他方法可以像处理矩形一样处理它？或者你们有计划在将来通过恒线来实现吗

我已附上下面的示例图像

---

您可以使用轴带绘制一个矩形，其工作原理类似于常量线

const axis = chart.getDefaultAxisX()
const band = axis.addBand()

通过在创建常量线和带时提供onTop:boolean参数，可以将常量线和带设置为位于图表中所有系列的顶部，或位于图表中所有系列的下方

您可以分别使用Band.setValueStart（）和Band.setValueEnd（）方法设置标注栏的起始值和结束值

例如：

band.setValueStart(100)
band.setValueEnd(200)

这将设置波段覆盖范围从100到200。 如果为标注栏启用了鼠标交互（默认情况下处于启用状态），则用户还可以单击标注栏并从其边缘拖动标注栏以调整标注栏的大小

---

如果我正确理解了您的问题，您希望在同一轴上从一个X轴值到另一个X轴值画一条线，则可以找到band的完整API文档

这可以通过使用。此系列类型允许您从点A到点B绘制单独的线段。每个线段可以单独配置。有关配置详细信息，请参阅API文档：

要获得从X=30到X=70的直线，如果您还没有新的SegmentSeries，则需要首先创建一个新的SegmentSeries

创建序列时，可以为分段序列指定X（或/和Y）轴

chart.addSegmentSeries（{xAxis:axisX1}）

const axisX1=chart.addAxisX（）
//创建系列
常量线段=chart.addSegmentSeries({
xAxis:axisX1
})
//（可选）禁用光标和鼠标交互
.setCursorEnabled（错误）
.setMouseInteractions（错误）

然后可以在序列上创建新行

lineSegment.add({
startX:30，
完:70,，
startY:0.2，
endY:0.2
})
.setStrokeStyle（stroke=>stroke.setFillStyle（fill=>fill.setColor（ColorHEX（'#0f0a'）））

这将从

{x:30，y:0.2}

到

{x:70，y:0.2}

创建半透明绿线

只需使用新的startX/Y和endX/Y值再次调用

lineSegment.add（）

，即可创建所需的任意多行

或者，如果您希望图表上有一个矩形而不是直线，您可以添加一个新的矩形。并在该序列上添加一个新矩形

const axisX2=chart.addAxisX（）
const rectSeries=chart.addRectangleSeries({
xAxis:axisX2
})
.setMouseInteractions（错误）
.setCursorEnabled（错误）
rectSeries.add({
x1:30，
x2:70，
y1:0.3，
y2:0.7，
})
.setFillStyle（f=>f.setColor（ColorHEX（'#f00a'））

请参见下面的直线和矩形的工作示例

//从LightningChartJS中提取所需的部分。
常数{
光照图，
主题，
UIElementBuilders，
背景,，
ColorHEX，
固体填料
}=lcjs
//从“xydata”-库导入数据生成器。
常数{
createProgressiveRandomGenerator
}=xydata
常量图表=lightningChart（）.ChartXY（）
const axisX1=chart.getDefaultAxisX（）
const axisX2=chart.addAxisX（）
常量axisX3=chart.addAxisX({
相反：对
})
常量系列=chart.addLineSeries（）
chart.getDefaultAxisX（）.setInterval（0，100，false，true）
chart.getDefaultAxisY（）.setInterval（0，1，false，true）
createProgressiveRandomGenerator（）
.设定值（100）
.generate（）
.toPromise（）
。然后（数据=>{
系列.添加（数据）
})
const rectSeries=chart.addRectangleSeries({
xAxis:axisX2
})
.setMouseInteractions（错误）
.setCursorEnabled（错误）
rectSeries.add({
x1:30，
x2:70，
y1:0.3，
y2:0.7，
})
.setFillStyle（f=>f.setColor（ColorHEX（'#f00a'））
常量线段=chart.addSegmentSeries({
xAxis:axisX3
})
.setCursorEnabled（错误）
.setMouseInteractions（错误）
lineSegment.add({
startX:30，
完:70,，
startY:0.2，
endY:0.2
})
.setStrokeStyle（stroke=>stroke.setFillStyle（fill=>fill.setColor（ColorHEX（'#0f0a'）））
lineSegment.add({
startX:40，
完:90,，
startY:0.2，
endY:0.1
})
.setStrokeStyle（stroke=>stroke.setFillStyle（fill=>fill.setColor（ColorHEX（'#fffa'））））

Hi，它覆盖了全屏，我不能画正方形或矩形，你确定吗？Hi，我扩展了答案以覆盖调整波段范围的大小。是的，但这也覆盖了全高！请检查我在问题中添加的示例图像。您好，您能告诉我这是否可行吗？您好，这在图表上绘制，但我想将其添加到轴上，就像常量线一样，我在单个图表中有多个轴。。如何将矩形系列或分段系列添加到不同的轴。您可以在创建分段系列时指定轴。我已经更新了答案来说明这一点。嗨，我们如何保持线段系列低于所有其他直线系列，就像我们在君士坦丁堡所做的那样？要在其他系列下渲染线段系列，您应该在其他系列之前添加线段系列。我们注意到一些错误，这意味着它不能保证以正确的顺序呈现。我只是处理并恢复线条系列。。要修复此错误。。。