Lightningchart js - 我如何旋转刻度文本？

问题描述

是否可以在 Lightningchart js 中旋转轴上的刻度文本？勾选文本不适合或与相邻文本重叠。

解决方法

从当前版本 (v3.0.1) 开始，没有用于配置文本的 API。

我认为这是一项非常有潜力的功能改进。如果您能描述旋转刻度文本的使用案例，这将有助于我们将其引入库。

屏幕截图是黄金。

从 LightningChart JS v3.1.0 开始，可以设置刻度标签旋转。

您可以使用 axis.setTickStyle 来设置当前报价策略的样式设置。或者，这可以通过 axis.setTickStrategy 的 styler 参数完成。

VisibleTicks 类具有 setLabelRotation 方法，可用于定义刻度旋转度数。正角顺时针旋转，负角逆时针旋转。所以要在 X 轴上旋转标签以垂直旋转。

chart.getDefaultAxisX()
    .setTickStyle((s) => s
        .setMajorTickStyle((m) => m.setLabelRotation(-90))
        .setMinorTickStyle(m => m.setLabelRotation(-90)),)

请参阅下面的完整示例。

const {
  lightningChart,PointShape,} = lcjs

const pointSize = 10

const chart = lightningChart().ChartXY()

chart.addPointLineSeries()
  .setPointSize(pointSize)
  .add([{
      x: 0,y: 0
    },{
      x: 50,y: 10
    },{
      x: 80,y: 20
    },{
      x: 100,y: 30
    },{
      x: 150,y: 40
    },{
      x: 180,y: 50
    },{
      x: 230,y: 60
    },{
      x: 290,y: 70
    }
  ])

chart.addPointLineSeries({
    pointShape: PointShape.Circle
  })
  .setPointSize(pointSize)
  .add([{
      x: 0,{
      x: 390,{
      x: 470,{
      x: 540,{
      x: 600,{
      x: 800,y: 70
    }
  ])

chart.getDefaultAxisX()
  .setInterval(0,1000,false,true)
  .setTickStyle((s) =>
    s.setMajorTickStyle((m) => m.setLabelRotation(-90)).setMinorTickStyle(m => m.setLabelRotation(-90)),)
chart.getDefaultAxisY()
  .setInterval(0,100,true)

<script src="https://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>

axis axis lightningchart rotation