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

Question

lightningchart js 可以在轴上旋转刻度文本吗？刻度文本不适合或与相邻文本重叠。

Answer 1

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

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

截图是金。

Answer 2

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

您可以使用 axis.setTickStyle to set style settings for current tick strategy. Alternatively this can be done through axis.setTickStrategy 的 styler 参数。

VisibleTicks class has 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,
      y: 0
    },
    {
      x: 100,
      y: 10
    },
    {
      x: 230,
      y: 20
    },
    {
      x: 390,
      y: 30
    },
    {
      x: 470,
      y: 40
    },
    {
      x: 540,
      y: 50
    },
    {
      x: 600,
      y: 60
    },
    {
      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, false, true)

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

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

Lightningchart js - How i can rotate tick text?

axis

rotation

lightningchart