HarmonyOS 鸿蒙Next中MpChart线形图如何设置X轴最多显示数据

【问题现象】

MpChart线形图使用的时候，如果数据量过多，折线图数据点会过于密集，导致显示效果不佳。

【背景知识】

MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，MpChart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。

参考资料：HarmonyOS开源三方库中心仓，码云git仓库、文档。

【定位思路】

依据现象查看文档资料，文档当中有提到：图表缩放、触摸等交互场景如何设置关闭与打开的相关属性，其中有列出控制设置x轴最多显示条数的属性：setVisibleXRangeMaximum(maxXRange: number)，可以避免当前页面同时显示的数据过多。

【解决方案】

在设置LineChartModel的之后，可以同时指定最多显示条数的属性

if (this.model) {
  this.model.setData(lineData);
  // 设置x轴最多显示条数的属性
  this.model.setVisibleXRangeMaximum(10);
}

设置对应的属性后，当前窗口最多显示指定条数的数据，通过左右滑动的手势操作来查看其他的数据。

【总结】

MpChart目前使用比较频繁的三方库，文档比较完善，常见问题可以参考官方文档。除了这里提到的线形图设置x轴最多显示数据，另外还有以下控制图表的缩放、触摸等交互设置。

setTouchEnabled(enabled: boolean)                 // 允许打开或者关闭与图表的所有触摸交互的情况。
setDragEnabled(enabled: boolean)                  // 打开或关闭对图表的拖动。
setScaleEnabled(enabled: boolean)                 // 打开或关闭对图表所有方向的缩放。
setScaleXEnabled(enabled: boolean)                // 打开或关闭x轴方向上的缩放
setScaleYEnabled(enabled: boolean)                // 打开或关闭y轴方向上的缩放。
setPinchZoom(enabled: boolean)                    // 如果设置为true，手势捏合缩放被打开。如果设置为false，x和y轴不可以被手势捏合缩放。
setHighlightPerTapEnabled(enabled: boolean)       // 如果设置为true，在图表中选中触发高亮效果。
setHighlightPerDragEnabled(enabled: boolean)      // 设置为true时允许在手指滑动结束时显示高亮效果。默认：true
setHighlightIndicatorEnabled(enabled: boolean)    // 如果设置为true， 选中数据时，将展示指标线。