Lightningchart js-如何旋转刻度文本

Question

在lightningchart js中是否可以在轴上旋转记号文本？勾选文本与相邻文本不匹配或重叠。

Answer 1

从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,
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>

Answer 2

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

我认为这是一个非常有潜力的功能改进。如果你能描述一下你对旋转记号文本的使用情况，这将有助于我们将其引入图书馆。

屏幕截图是金色的。