从一个 X 轴到另一个 X 轴画线

编程问答 2022-05-02

问题描述

我想从一个 x 轴画一条线到另一个 x 轴，可以吗？

现在我只能看到恒定线存在，但它在整页中绘制水平线。

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

有没有其他方法可以像矩形一样做到这一点？或者你们有没有计划在未来通过固定线路做到这一点？

我在下面附上了示例图片

enter image description here

解决方法

如果我正确理解了您的问题，您想从一个 X 轴值到同一轴上的另一个 X 轴值画一条线。

这可以通过使用 ChartXY.addSegmentSeries() 来完成。此系列类型允许您绘制从 A 点到 B 点的单独线段。每个线段都可以单独配置。有关配置细节，请参阅 API 文档：https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/segmentfigure.html

要实现从 X = 30 到 X = 70 的线，如果您还没有新的 SegmentSeries，您需要先创建一个。

您可以在创建系列时为 SegmentSeries 指定 X（或/和 Y）轴。 chart.addSegmentSeries({xAxis: axisX1})

const axisX1 = chart.addAxisX()
// create series
const lineSegment = chart.addSegmentSeries({
  xAxis: axisX1
})
    // optionally disable cursor and mouse interactions
    .setCursorEnabled(false)
    .setMouseInteractions(false)

然后你可以在系列上创建一个新行

lineSegment.add({
    startX: 30,endX: 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() 即可创建任意数量的行。

或者，如果您想在图表上使用矩形而不是线条，您可以添加一个新的 RectangleSeries。并在该系列上添加一个新矩形。

const axisX2 = chart.addAxisX()
const rectSeries = chart.addRectangleSeries({
  xAxis: axisX2
})
    .setMouseInteractions(false)
    .setCursorEnabled(false)

rectSeries.add({
    x1: 30,x2: 70,y1: 0.3,y2: 0.7,})
    .setFillStyle(f => f.setColor(ColorHEX('#f00a')))

有关线条和矩形的工作示例，请参见下文。

// Extract required parts from LightningChartJS.
const {
  lightningChart,Themes,UIElementBuilders,UIBackgrounds,ColorHEX,SolidFill
} = lcjs

// Import data-generator from 'xydata'-library.
const {
  createProgressiveRandomGenerator
} = xydata

const chart = lightningChart().ChartXY()

const axisX1 = chart.getDefaultAxisX()
const axisX2 = chart.addAxisX()
const axisX3 = chart.addAxisX({
  opposite: true
})

const series = chart.addLineSeries()
chart.getDefaultAxisX().setInterval(0,100,false,true)
chart.getDefaultAxisY().setInterval(0,1,true)

createProgressiveRandomGenerator()
  .setNumberOfPoints(100)
  .generate()
  .toPromise()
  .then(data => {
    series.add(data)
  })

const rectSeries = chart.addRectangleSeries({
    xAxis: axisX2
  })
  .setMouseInteractions(false)
  .setCursorEnabled(false)

rectSeries.add({
    x1: 30,})
  .setFillStyle(f => f.setColor(ColorHEX('#f00a')))

const lineSegment = chart.addSegmentSeries({
    xAxis: axisX3
  })
  .setCursorEnabled(false)
  .setMouseInteractions(false)

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

lineSegment.add({
    startX: 40,endX: 90,endY: 0.1
  })
  .setStrokeStyle(stroke => stroke.setFillStyle(fill => fill.setColor(ColorHEX('#fffa'))))
<script src="https://unpkg.com/@arction/lcjs@3.0.0/dist/lcjs.iife.js"></script>
<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>

,

您可以使用 Axis Band 绘制一个矩形，该矩形的作用类似于恒定线。

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

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

您可以分别使用 Band.setValueStart() 和 Band.setValueEnd() 方法设置 Band 的开始和结束值。

例如：

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

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

可以在 here.

找到乐队的完整 API 文档
lightningchart