更改光标线条颜色 - LightningChart
Change cursor Line color - LightningChart
我正在创建如下光标
var purple = new SolidFill({ color: ColorHEX('#ab00f5') });
// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
.setPointMarker(UIBackgrounds.Circle)
.addStyler(marker => marker
.setPointMarker(point => point
.setSize({ x: 4, y: 4 })
.setFillStyle(purple)
)
)
chart[1].addChartMarkerXY(SeriesMarkerBuilder)
.setPosition({ x: 400, y: 0 }) .setGridStrokeYVisibility(UIVisibilityModes.whenDragged);
如何更改白色垂直线的颜色和粗细...以及如何隐藏标签并在顶部显示标签？
标签可见性
您可以使用 ChartMarker.setTickMarkerXVisibility and ChartMarker.setTickMarkerYVisibility. UIVisibilityModes 来控制标签何时可见，枚举定义了可能的可见性状态。您可以始终使用 UIVisibilityModes.never 隐藏标签，并且仅在使用 UIVisibilityModes.whenDragged 拖动时显示标签，请参阅 UIVIsibilityModes 文档以了解所有可能的可见性模式。
顶部的标签
将标签移动到顶部需要在图表顶部有一个轴。
const topAxis = chart.addAxisX(true)
const area = chart.addAreaSeries({type: AreaSeriesTypes.Positive, xAxis: topAxis})
const marker = chart.addChartMarkerXY(builder, topAxis)
如果您不需要默认的 x 轴，可以使用 chart.getDefaultAxisX().dispose() 将其删除。如果去掉默认轴，顶轴是唯一的x轴，那么addChartMarkerXY的xAxis参数可以省略
标记网格描边样式
标记水平线和垂直线的样式通过向标记构建器添加样式器或在创建标记后更改样式来定义。
向构建器添加样式器
您可以将样式器添加到 MarkerBuilders.XY with MarkerBuilders.XY.addStyler() method. The styler is a mutator function which receives the marker as the first parameter and expects a new marker to be returned from it. (marker) => marker You can style the marker with the methods of StaticCursorXY interface. To style the vertical line, you should style call StaticCursorXY.setGridStrokeXStyle() 方法并定义新的笔划样式。有关样式的示例，请参见下面的代码片段。
const SeriesMarkerBuilder = MarkerBuilders.XY
.addStyler(marker => marker
.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(10)
)
)
创建后的样式
如果您不想使用构建器来设置图表标记的样式，您可以直接使用 StaticCursorXY 接口的方法。
const marker = chart.addChartMarkerXY(MarkerBuilders.XY)
marker.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(1)
)
// Extract required parts from LightningChartJS.
const {
lightningChart,
AreaSeriesTypes,
ColorPalettes,
SolidFill,
UIOrigins,
UIElementBuilders,
LegendBoxBuilders,
UIButtonPictures,
ColorHEX,
MarkerBuilders,
UIBackgrounds,
UIVisibilityModes
} = lcjs
// ----- Cache styles -----
const palette = ColorPalettes.fullSpectrum(10)
const solidFills = [3, 0].map(palette).map(color => new SolidFill({ color }))
const opaqueFills = solidFills.map(fill => fill.setA(150))
// Create a XY Chart.
const chart = lightningChart()
.ChartXY()
.setPadding({ right: 2 })
const xAxis = chart.addAxisX(true)
chart.getDefaultAxisX().dispose()
// ---- Add multiple Area series with different baselines and direction. ----
// Create semi-transparent red area to draw points above the baseline.
const areaProfit = chart.addAreaSeries({ type: AreaSeriesTypes.Positive, xAxis })
.setFillStyle(opaqueFills[0])
.setStrokeStyle(stroke => stroke.setFillStyle(solidFills[0]))
// Create semi-transparent orange area to draw points below the baseline.
const areaExpense = chart.addAreaSeries({ type: AreaSeriesTypes.Negative, xAxis })
.setFillStyle(opaqueFills[1])
.setStrokeStyle(stroke => stroke.setFillStyle(solidFills[1]))
const profitData = [
{ x: 0, y: 0 },
{ x: 10, y: 21 },
{ x: 20, y: 59 },
{ x: 30, y: 62 },
{ x: 40, y: 78 },
{ x: 50, y: 85 },
{ x: 60, y: 95 },
{ x: 70, y: 98 },
{ x: 80, y: 103 },
{ x: 90, y: 110 },
{ x: 100, y: 112 },
{ x: 110, y: 126 },
{ x: 120, y: 132 },
{ x: 130, y: 170 },
{ x: 140, y: 172 },
{ x: 150, y: 202 },
{ x: 160, y: 228 },
{ x: 170, y: 267 },
{ x: 180, y: 300 },
{ x: 190, y: 310 },
{ x: 200, y: 320 },
{ x: 210, y: 329 },
{ x: 220, y: 336 },
{ x: 230, y: 338 },
{ x: 240, y: 343 },
{ x: 250, y: 352 },
{ x: 260, y: 355 },
{ x: 270, y: 390 },
{ x: 280, y: 392 },
{ x: 290, y: 418 },
{ x: 300, y: 421 },
{ x: 310, y: 430 },
{ x: 320, y: 434 },
{ x: 330, y: 468 },
{ x: 340, y: 472 },
{ x: 350, y: 474 },
{ x: 360, y: 480 },
{ x: 370, y: 506 },
{ x: 380, y: 545 },
{ x: 390, y: 548 },
{ x: 400, y: 552 },
{ x: 410, y: 584 },
{ x: 420, y: 612 },
{ x: 430, y: 619 },
{ x: 440, y: 627 },
{ x: 450, y: 657 },
{ x: 460, y: 669 },
{ x: 470, y: 673 },
{ x: 480, y: 695 },
{ x: 490, y: 702 },
{ x: 500, y: 710 }
]
const expensesData = [
{ x: 0, y: 0 },
{ x: 10, y: -58 },
{ x: 20, y: -61 },
{ x: 30, y: -62 },
{ x: 40, y: -66 },
{ x: 50, y: -88 },
{ x: 60, y: -93 },
{ x: 70, y: -124 },
{ x: 80, y: -126 },
{ x: 90, y: -136 },
{ x: 100, y: -152 },
{ x: 110, y: -156 },
{ x: 120, y: -190 },
{ x: 130, y: -199 },
{ x: 140, y: -200 },
{ x: 150, y: -208 },
{ x: 160, y: -210 },
{ x: 170, y: -235 },
{ x: 180, y: -270 },
{ x: 190, y: -299 },
{ x: 200, y: -321 },
{ x: 210, y: -342 },
{ x: 220, y: -350 },
{ x: 230, y: -360 },
{ x: 240, y: -374 },
{ x: 250, y: -413 },
{ x: 260, y: -433 },
{ x: 270, y: -447 },
{ x: 280, y: -449 },
{ x: 290, y: -454 },
{ x: 300, y: -461 },
{ x: 310, y: -461 },
{ x: 320, y: -492 },
{ x: 330, y: -496 },
{ x: 340, y: -518 },
{ x: 350, y: -522 },
{ x: 360, y: -557 },
{ x: 370, y: -562 },
{ x: 380, y: -596 },
{ x: 390, y: -599 },
{ x: 400, y: -609 },
{ x: 410, y: -611 },
{ x: 420, y: -628 },
{ x: 430, y: -635 },
{ x: 440, y: -636 },
{ x: 450, y: -643 },
{ x: 460, y: -643 },
{ x: 470, y: -647 },
{ x: 480, y: -648 },
{ x: 490, y: -659 },
{ x: 500, y: -665 }
]
profitData.forEach((point) => { areaProfit.add(point) })
expensesData.forEach((point) => { areaExpense.add(point) })
var purple = new SolidFill({ color: ColorHEX('#ab00f5') });
// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
.setPointMarker(UIBackgrounds.Circle)
.addStyler(marker => marker
.setPointMarker(point => point
.setSize({ x: 4, y: 4 })
.setFillStyle(purple)
)
.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(10)
)
)
const marker = chart.addChartMarkerXY(SeriesMarkerBuilder)
.setPosition({ x: 400, y: 0 })
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>
我正在创建如下光标
var purple = new SolidFill({ color: ColorHEX('#ab00f5') });
// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
.setPointMarker(UIBackgrounds.Circle)
.addStyler(marker => marker
.setPointMarker(point => point
.setSize({ x: 4, y: 4 })
.setFillStyle(purple)
)
)
chart[1].addChartMarkerXY(SeriesMarkerBuilder)
.setPosition({ x: 400, y: 0 }) .setGridStrokeYVisibility(UIVisibilityModes.whenDragged);
如何更改白色垂直线的颜色和粗细...以及如何隐藏标签并在顶部显示标签？
标签可见性
您可以使用 ChartMarker.setTickMarkerXVisibility and ChartMarker.setTickMarkerYVisibility. UIVisibilityModes 来控制标签何时可见，枚举定义了可能的可见性状态。您可以始终使用 UIVisibilityModes.never 隐藏标签，并且仅在使用 UIVisibilityModes.whenDragged 拖动时显示标签，请参阅 UIVIsibilityModes 文档以了解所有可能的可见性模式。
顶部的标签
将标签移动到顶部需要在图表顶部有一个轴。
const topAxis = chart.addAxisX(true)
const area = chart.addAreaSeries({type: AreaSeriesTypes.Positive, xAxis: topAxis})
const marker = chart.addChartMarkerXY(builder, topAxis)
如果您不需要默认的 x 轴，可以使用 chart.getDefaultAxisX().dispose() 将其删除。如果去掉默认轴，顶轴是唯一的x轴，那么addChartMarkerXY的xAxis参数可以省略
标记网格描边样式
标记水平线和垂直线的样式通过向标记构建器添加样式器或在创建标记后更改样式来定义。
向构建器添加样式器
您可以将样式器添加到 MarkerBuilders.XY with MarkerBuilders.XY.addStyler() method. The styler is a mutator function which receives the marker as the first parameter and expects a new marker to be returned from it. (marker) => marker You can style the marker with the methods of StaticCursorXY interface. To style the vertical line, you should style call StaticCursorXY.setGridStrokeXStyle() 方法并定义新的笔划样式。有关样式的示例，请参见下面的代码片段。
const SeriesMarkerBuilder = MarkerBuilders.XY
.addStyler(marker => marker
.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(10)
)
)
创建后的样式
如果您不想使用构建器来设置图表标记的样式，您可以直接使用 StaticCursorXY 接口的方法。
const marker = chart.addChartMarkerXY(MarkerBuilders.XY)
marker.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(1)
)
// Extract required parts from LightningChartJS.
const {
lightningChart,
AreaSeriesTypes,
ColorPalettes,
SolidFill,
UIOrigins,
UIElementBuilders,
LegendBoxBuilders,
UIButtonPictures,
ColorHEX,
MarkerBuilders,
UIBackgrounds,
UIVisibilityModes
} = lcjs
// ----- Cache styles -----
const palette = ColorPalettes.fullSpectrum(10)
const solidFills = [3, 0].map(palette).map(color => new SolidFill({ color }))
const opaqueFills = solidFills.map(fill => fill.setA(150))
// Create a XY Chart.
const chart = lightningChart()
.ChartXY()
.setPadding({ right: 2 })
const xAxis = chart.addAxisX(true)
chart.getDefaultAxisX().dispose()
// ---- Add multiple Area series with different baselines and direction. ----
// Create semi-transparent red area to draw points above the baseline.
const areaProfit = chart.addAreaSeries({ type: AreaSeriesTypes.Positive, xAxis })
.setFillStyle(opaqueFills[0])
.setStrokeStyle(stroke => stroke.setFillStyle(solidFills[0]))
// Create semi-transparent orange area to draw points below the baseline.
const areaExpense = chart.addAreaSeries({ type: AreaSeriesTypes.Negative, xAxis })
.setFillStyle(opaqueFills[1])
.setStrokeStyle(stroke => stroke.setFillStyle(solidFills[1]))
const profitData = [
{ x: 0, y: 0 },
{ x: 10, y: 21 },
{ x: 20, y: 59 },
{ x: 30, y: 62 },
{ x: 40, y: 78 },
{ x: 50, y: 85 },
{ x: 60, y: 95 },
{ x: 70, y: 98 },
{ x: 80, y: 103 },
{ x: 90, y: 110 },
{ x: 100, y: 112 },
{ x: 110, y: 126 },
{ x: 120, y: 132 },
{ x: 130, y: 170 },
{ x: 140, y: 172 },
{ x: 150, y: 202 },
{ x: 160, y: 228 },
{ x: 170, y: 267 },
{ x: 180, y: 300 },
{ x: 190, y: 310 },
{ x: 200, y: 320 },
{ x: 210, y: 329 },
{ x: 220, y: 336 },
{ x: 230, y: 338 },
{ x: 240, y: 343 },
{ x: 250, y: 352 },
{ x: 260, y: 355 },
{ x: 270, y: 390 },
{ x: 280, y: 392 },
{ x: 290, y: 418 },
{ x: 300, y: 421 },
{ x: 310, y: 430 },
{ x: 320, y: 434 },
{ x: 330, y: 468 },
{ x: 340, y: 472 },
{ x: 350, y: 474 },
{ x: 360, y: 480 },
{ x: 370, y: 506 },
{ x: 380, y: 545 },
{ x: 390, y: 548 },
{ x: 400, y: 552 },
{ x: 410, y: 584 },
{ x: 420, y: 612 },
{ x: 430, y: 619 },
{ x: 440, y: 627 },
{ x: 450, y: 657 },
{ x: 460, y: 669 },
{ x: 470, y: 673 },
{ x: 480, y: 695 },
{ x: 490, y: 702 },
{ x: 500, y: 710 }
]
const expensesData = [
{ x: 0, y: 0 },
{ x: 10, y: -58 },
{ x: 20, y: -61 },
{ x: 30, y: -62 },
{ x: 40, y: -66 },
{ x: 50, y: -88 },
{ x: 60, y: -93 },
{ x: 70, y: -124 },
{ x: 80, y: -126 },
{ x: 90, y: -136 },
{ x: 100, y: -152 },
{ x: 110, y: -156 },
{ x: 120, y: -190 },
{ x: 130, y: -199 },
{ x: 140, y: -200 },
{ x: 150, y: -208 },
{ x: 160, y: -210 },
{ x: 170, y: -235 },
{ x: 180, y: -270 },
{ x: 190, y: -299 },
{ x: 200, y: -321 },
{ x: 210, y: -342 },
{ x: 220, y: -350 },
{ x: 230, y: -360 },
{ x: 240, y: -374 },
{ x: 250, y: -413 },
{ x: 260, y: -433 },
{ x: 270, y: -447 },
{ x: 280, y: -449 },
{ x: 290, y: -454 },
{ x: 300, y: -461 },
{ x: 310, y: -461 },
{ x: 320, y: -492 },
{ x: 330, y: -496 },
{ x: 340, y: -518 },
{ x: 350, y: -522 },
{ x: 360, y: -557 },
{ x: 370, y: -562 },
{ x: 380, y: -596 },
{ x: 390, y: -599 },
{ x: 400, y: -609 },
{ x: 410, y: -611 },
{ x: 420, y: -628 },
{ x: 430, y: -635 },
{ x: 440, y: -636 },
{ x: 450, y: -643 },
{ x: 460, y: -643 },
{ x: 470, y: -647 },
{ x: 480, y: -648 },
{ x: 490, y: -659 },
{ x: 500, y: -665 }
]
profitData.forEach((point) => { areaProfit.add(point) })
expensesData.forEach((point) => { areaExpense.add(point) })
var purple = new SolidFill({ color: ColorHEX('#ab00f5') });
// Create a builder for SeriesMarker to allow for full modification of its structure.
var SeriesMarkerBuilder = MarkerBuilders.XY
.setPointMarker(UIBackgrounds.Circle)
.addStyler(marker => marker
.setPointMarker(point => point
.setSize({ x: 4, y: 4 })
.setFillStyle(purple)
)
.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(10)
)
)
const marker = chart.addChartMarkerXY(SeriesMarkerBuilder)
.setPosition({ x: 400, y: 0 })
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
<script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>