#鸿蒙通关秘籍#如何在鸿蒙OS中使用MpChart实现柱状图和曲线图？

const model = new BarChartModel();
model.setMaxVisibleValueCount(VISIBLE_VALUE_COUNT);
model.setDrawGridBackground(true);
model.setGridBackgroundColor(GRID_BG_COLOR);
model.setDrawBarShadow(false);
model.setDrawValueAboveBar(true);
model.setHighlightFullBarEnabled(true);
1.
2.
3.
4.
5.
6.
7.

const model = new LineChartModel();
model.setPinchZoom(false);
model.setDrawGridBackground(false);
1.
2.
3.

const xAxis = model.getXAxis();
if (xAxis) {
  xAxis.setDrawGridLines(false);
  xAxis.setLabelCount(LABEL_COUNT, false);
  xAxis.setPosition(XAxisPosition.BOTTOM);
  xAxis.setValueFormatter(new XValueFormatter());
}

const leftAxis = model.getAxisLeft();
if (leftAxis) {
  leftAxis.setAxisMinimum(ZERO);
  leftAxis.setDrawLimitLinesBehindData(false);
  leftAxis.setValueFormatter(new YValueFormatter());
  leftAxis.addLimitLine(limitLine);
}

const rightAxis = model.getAxisRight();
if (rightAxis) {
  rightAxis.setEnabled(false);
  rightAxis.setAxisMinimum(ZERO);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

const xAxis = model.getXAxis();
if (xAxis) {
  xAxis.setPosition(XAxisPosition.BOTTOM);
  xAxis.setDrawGridLines(true);
  xAxis.setGranularity(1);
  xAxis.setValueFormatter(new XValueFormatter());
  xAxis.setLabelCount(10);
  xAxis.enableGridDashedLine(2, 2, 0);
}

const leftAxis = model.getAxisLeft();
if (leftAxis) {
  leftAxis.setLabelCount(4, true);
  leftAxis.setDrawGridLines(true);
  leftAxis.setDrawGridLinesBehindData(true);
  leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
  leftAxis.setAxisMinimum(0);
  leftAxis.setValueFormatter(new YValueFormatter());
  leftAxis.setEnabled(true);
  leftAxis.enableGridDashedLine(2, 2, 0);
}

const rightAxis = model.getAxisRight();
if (rightAxis) {
  rightAxis.setEnabled(false);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

const data = getNormalData();
model.setData(data);
1.
2.

const lineData = getLineData();
model.setData(lineData);
1.
2.