更改光标线颜色- LightningChart
更改光标线颜色- LightningChart
提问于 2020-06-18 02:23:53
我创建的光标如下所示
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);如何更改白色垂直线颜色和粗细...另外，如何隐藏标签并在顶部显示标签？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-18 15:31:41
标签可见性
您可以使用ChartMarker.setTickMarkerXVisibility和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.addStyler()方法将样式添加到MarkerBuilders.XY中。样式器是一个赋值函数，它接收标记作为第一个参数，并期望从它返回一个新的标记。你可以用StaticCursorXY接口的方法设置(marker) => marker标记的样式。若要设置垂直线的样式，应设置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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62435872
复制相关文章
相似问题
腾讯云开发者
