折线图X轴首位坐标问题,以及marker光圈问题请教
byblinkdagger opened this issue · comments
嗨大佬,有2个样式问题困扰好几天了,想请教一下:
1.表格数据量动态变化的时候,x轴最后一个坐标不显示。(比如当月每日数据数量,是根据目前是几号动态变化的,我想总是能显示第一天和最后一天的X坐标,这种情况下设置xAxisTickInterval(count)也不会有很好的效果)
比如今天是11-17号,我期望X坐标轴能显示首个日期和最后一个日期,这种情况根据xAxisTickInterval并不能整除
2.数据量少的时候,线图会出现marker圈标记,数据多的时候又不会出现。我想设置统一在折线图上不出现marker圈,在点击后才会出现,并且在表格下方的标题name字样前也会展示不同的marker圈图案(圆形、菱形),这种情况如果我通过.marker(AAMarker().radius(0).states(AAMarkerStates().hover(AAMarkerHover().radius(0).radiusPlus(0).enabled(true))))去统一设置的话,则在所有情况都不会显示marker了。
如果设置为AAMarker().radius(0),则会出现如下样式:
请问有熟悉highcharts的大佬可以帮助下吗?
1.表格数据量动态变化的时候,x轴最后一个坐标不显示。(比如当月每日数据数量,是根据目前是几号动态变化的,我想总是能显示第一天和最后一天的X坐标,这种情况下设置xAxisTickInterval(count)也不会有很好的效果)
部分 labels
不显示, 是因为 Highcharts 会自动隐藏部分 labels
以避免文字互相拥挤或遮盖.
- 如果需要 X 轴的文字全部显示, 可以试试设置 X 轴
labels
的allowOverlap
为true
来允许 X 轴的labels
全部显示.
参考:
- 如果不需要 X 轴的文字全部显示, 同时又需要强制显示最后一天的 X 轴文字, 可以试试 X 轴
labels
的formatter
内容, 来自定义 X 轴文字内容显示逻辑.
参考:
2.数据量少的时候,线图会出现marker圈标记,数据多的时候又不会出现。我想设置统一在折线图上不出现marker圈,在点击后才会出现,并且在表格下方的标题name字样前也会展示不同的marker圈图案(圆形、菱形),这种情况如果我通过.marker(AAMarker().radius(0).states(AAMarkerStates().hover(AAMarkerHover().radius(0).radiusPlus(0).enabled(true))))去统一设置的话,则在所有情况都不会显示marker了。
你这里的
AAMarkerHover()
.radius(0)
.radiusPlus(0)
.enabled(true)
你这里设置为 0 是有问题的, 你可以把这里的值分别改为大于 0, 再看看交互效果.
参考:
非常感谢回复和帮助,目前第二个问题已经解决
你这里设置为 0 是有问题的, 你可以把这里的值分别改为大于 0, 再看看交互效果.
针对第一个问题是要针对Y轴坐标加单位一样,通过js去操作吗?
.labels(AALabels().formatter("function () {\n" +
" var yValue = this.value;\n" +
" var unitStr = \"kWh\";\n" +
" var formattedYValue = yValue + unitStr;\n" +
" return formattedYValue;\n" +
" }"))
因为本人对js和highCharts都不是很熟悉,方便的话大佬可以给一段思路的示例吗?目前这个坐标轴首位显示的需求也不是很着急,而且双端(Android、iOS)都是一样的表现,所以产品勉强接受了后期优化。