[英]Change cursor Line color - LightningChart
I am creating cursor like below我正在创建 cursor 如下所示
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);
How do I change that White vertical line colour and thickness... also how to hide the label and show the label in top?如何更改白色垂直线的颜色和粗细...以及如何隐藏 label 并在顶部显示 label?
You can control when the labels are visible with ChartMarker.setTickMarkerXVisibility
and ChartMarker.setTickMarkerYVisibility
.您可以使用
ChartMarker.setTickMarkerXVisibility
和ChartMarker.setTickMarkerYVisibility
控制标签何时可见。 UIVisibilityModes
enum defines the possible visibility states. UIVisibilityModes
枚举定义了可能的可见性状态。 You can hide the label always with UIVisibilityModes.never
and only show it when dragging with UIVisibilityModes.whenDragged
see the UIVIsibilityModes
documentation for all the possible visibility modes.您可以始终使用
UIVisibilityModes.never
隐藏 label,并且仅在使用UIVisibilityModes.whenDragged
拖动时显示它,请参阅UIVIsibilityModes
文档了解所有可能的可见性模式。
Moving the label to top requires having an axis on top of the chart.将 label 移到顶部需要在图表顶部有一个轴。
const topAxis = chart.addAxisX(true)
const area = chart.addAreaSeries({type: AreaSeriesTypes.Positive, xAxis: topAxis})
const marker = chart.addChartMarkerXY(builder, topAxis)
If you don't need the default x axis, you can remove it with chart.getDefaultAxisX().dispose()
.如果您不需要默认的 x 轴,可以使用
chart.getDefaultAxisX().dispose()
将其删除。 If the default axis is removed and the top axis is the only x axis, then the xAxis parameter of addChartMarkerXY
can be omitted.如果默认轴被移除,并且顶轴是唯一的 x 轴,那么
addChartMarkerXY
的 xAxis 参数可以省略。
The style for the marker horizontal and vertical lines is defined by either adding a styler to the marker builder or by changing the style after the marker is created.标记水平线和垂直线的样式是通过向标记生成器添加样式器或在创建标记后更改样式来定义的。
You can add styler to MarkerBuilders.XY
with MarkerBuilders.XY.addStyler()
method.您可以使用
MarkerBuilders.XY.addStyler()
方法将样式器添加到MarkerBuilders.XY
。 The styler is a mutator function which receives the marker as the first parameter and expects a new marker to be returned from it.样式器是一个变异器 function,它接收标记作为第一个参数,并期望从中返回一个新的标记。
(marker) => marker
You can style the marker with the methods of StaticCursorXY
interface. (marker) => marker
您可以使用StaticCursorXY
接口的方法设置标记的样式。 To style the vertical line, you should style call StaticCursorXY.setGridStrokeXStyle()
method and define the new stroke style.要设置垂直线的样式,您应该调用
StaticCursorXY.setGridStrokeXStyle()
方法并定义新的笔划样式。 See the below code snippet for an example of styling.有关样式的示例,请参见下面的代码片段。
const SeriesMarkerBuilder = MarkerBuilders.XY
.addStyler(marker => marker
.setGridStrokeXStyle(line =>
line.setFillStyle(f =>
f.setColor(ColorHEX('#f00'))
)
.setThickness(10)
)
)
If you don't want to use the builder to style your chart marker you can use the methods of StaticCursorXY
interface directly.如果您不想使用构建器来设置图表标记的样式,可以直接使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.