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

Question

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

现在我只能看到常量线，但它在整页中绘制水平线。

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

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

我在下面附上了示例图片

Answer 1

您可以使用 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 的范围。如果您为 band 启用了鼠标交互（默认情况下处于启用状态），用户还可以从其边缘单击并拖动 band 以调整其大小。

可以找到 band 的完整 API 文档 here.

Answer 2

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

这可以通过使用 ChartXY.addSegmentSeries(). This series type allows you to draw individual line segments from Point A to Point B. Each segment can be configured individually. See the API Documentation for configuration specifics: https://www.arction.com/lightningchart-js-api-documentation/v3.0.0/classes/segmentfigure.html

来完成

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

您可以在创建系列时为 SegmentSeries 指定 X (or/and 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, false, 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,
    x2: 70,
    y1: 0.3,
    y2: 0.7,
  })
  .setFillStyle(f => f.setColor(ColorHEX('#f00a')))

const lineSegment = chart.addSegmentSeries({
    xAxis: axisX3
  })
  .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'))))

lineSegment.add({
    startX: 40,
    endX: 90,
    startY: 0.2,
    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>

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

Draw lines from one X-axis to another X-axis

lightningchart