折线图X轴首位坐标问题，以及marker光圈问题请教

[byblinkdagger]

嗨大佬，有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)，则会出现如下样式：

[byblinkdagger]

请问有熟悉highcharts的大佬可以帮助下吗？

[AAChartModel]

1.表格数据量动态变化的时候，x轴最后一个坐标不显示。（比如当月每日数据数量，是根据目前是几号动态变化的，我想总是能显示第一天和最后一天的X坐标，这种情况下设置xAxisTickInterval(count)也不会有很好的效果）

部分 labels 不显示, 是因为 Highcharts 会自动隐藏部分 labels 以避免文字互相拥挤或遮盖.

1. 如果需要 X 轴的文字全部显示, 可以试试设置 X 轴 labels 的 allowOverlap 为 true 来允许 X 轴的 labels 全部显示.

参考:

• https://api.highcharts.com/highcharts/xAxis.labels.allowOverlap

2. 如果不需要 X 轴的文字全部显示, 同时又需要强制显示最后一天的 X 轴文字, 可以试试 X 轴 labels 的 formatter 内容, 来自定义 X 轴文字内容显示逻辑.

参考:

• https://api.highcharts.com/highcharts/xAxis.labels.formatter

[AAChartModel]

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, 再看看交互效果.

参考:

• https://api.highcharts.com/highcharts/series.line.marker.states.hover.radius
• https://api.highcharts.com/highcharts/series.line.marker.states.hover.radiusPlus

[byblinkdagger]

非常感谢回复和帮助，目前第二个问题已经解决

你这里设置为 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）都是一样的表现，所以产品勉强接受了后期优化。