LightningChart-JS 中的 ChartXY 和 Axis 样式方法

编程问答 2022-04-30

问题描述

screenshot

嗨，我需要帮助来更改 ChartXY 和 Axis 的一系列样式属性。我尝试了文档中的方法，但要么找不到该函数，要么不清楚 API 文档中的哪个方法。

  1. 更改默认的 x 和 y 刻度字体属性（系列、大小、样式） - 在 API 文档中，我只看到标题和自定义刻度。
  2. 更改图表背景颜色 - ChartXY.setChartBackgroundFillStyle 返回函数未找到错误
  3. 更改图表边框道具 - ChartXY.setChartBackgroundstroke 返回函数未找到错误

请帮忙。

解决方法

  1. 更改默认的 x 和 y 刻度字体属性（系列、大小、样式）

自动放置的轴刻度的所有修改都是通过 TickStrategy 完成的。由于不同的报价策略可以有不同的报价结构，因此在指定报价策略时必须同时进行此修改。它看起来像这样：

chart.getDefaultAxisX()
    // Specify tick strategy and configure it via callback function.
    .setTickStrategy(AxisTickStrategies.Numeric,(ticks) => ticks
        .setMinorTickStyle((style) => style
            .setLabelFont((font) => font.setStyle('italic'))
        )
    )

在本例中，ticks 的类型为 NumericTickStrategy。

TypeScript 用户请注意，当前必须将刻度样式强制转换为 VisibleTicks，如下所示：ticks.setMinorTickStyle((style: VisibleTicks) => style...)

  1. 更改图表背景颜色
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255,0) }))
  1. 更改图表边框道具
chart.setSeriesBackgroundStrokeStyle(new SolidLine({ thickness: 2,fillStyle: new SolidFill({ color: ColorRGBA(255,0) }) }))
lightningchart