A highly customizable and performant custom view to render curved line graph.
Step 1: Compile the project and copy the HAR package generated in the Build directory of the GraphView folder into the project lib folder
Step 2. Add the following code inside Gradle of Entry (just Demo)
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
Step 3. Add CurveGraphView to your layout file
<com.example.graphview.CurveGraphView
ohos:id="$+id:cgv"
ohos:width="360vp"
ohos:height="250vp"
/>
Step 4: remote maven repo integration
1.add mavenCentral dependency at repositories in your project build.gradle
allprojects {
repositories {
mavenCentral()
}
}
2.add library dependency at your module build.gradle
implementation 'com.gitee.baijuncheng-open-source:curve-graph-view:1.0.0'
curveGraphView = (CurveGraphView) findComponentById(com.example.curvegraphview.ResourceTable.Id_cgv);
try {
curveGraphView.configure(
new CurveGraphConfig.Builder(this)
.setAxisColor(com.example.graphview.ResourceTable.Color_Blue)
.setVerticalGuideline(4)
.setHorizontalGuideline(2)
.setGuidelineColor(com.example.graphview.ResourceTable.Color_Red)
.setNoDataMsg(" No Data ")
.setxAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black)
.setyAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black)
.setAnimationDuration(2000)
.build()
);
}
The graph view points the plot with keeping 2 values in mind, span and value span relates to the x-coordinate, and value relates to the y-coordinate. Create the object by providing values as shown below.
PointMap pointMap = new PointMap();
pointMap.addPoint(0, 100);
pointMap.addPoint(1, 500);
pointMap.addPoint(5, 800);
pointMap.addPoint(4, 600);
A GraphData object expects a PointMap, strokeColor of the graph, and an optional gradientColor. Create a GraphData object as shown below.
final GraphData gd = GraphData.builder(this)
.setPointMap(pointMap)
.setGraphStroke(com.example.graphview.ResourceTable.Color_Black)
.setGraphGradient(com.example.curvegraphview.ResourceTable.Color_gradientStartColor2, com.example.curvegraphview.ResourceTable.Color_gradientEndColor2)
.animateLine(true)
.setPointColor(com.example.graphview.ResourceTable.Color_Red)
.setPointRadius(5)
.build();
Provide the above constructed data to CurveGraphView via the curveGraphView.setData(int span, int maxVal, GraphData... gds) method. dscription of the params:
curveGraphView = (CurveGraphView) findComponentById(com.example.curvegraphview.ResourceTable.Id_cgv);
try {
curveGraphView.configure(
new CurveGraphConfig.Builder(this)
.setAxisColor(com.example.graphview.ResourceTable.Color_Blue)
.setVerticalGuideline(4)
.setHorizontalGuideline(2)
.setGuidelineColor(com.example.graphview.ResourceTable.Color_Red)
.setNoDataMsg(" No Data ")
.setxAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black)
.setyAxisScaleTextColor(com.example.graphview.ResourceTable.Color_Black)
.setAnimationDuration(2000)
.build()
);
} catch (NotExistException e) {
e.printStackTrace();
} catch (WrongTypeException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
PointMap pointMap = new PointMap();
pointMap.addPoint(1, 200);
pointMap.addPoint(3, 400);
pointMap.addPoint(4, 100);
pointMap.addPoint(5, 600);
final GraphData gd = GraphData.builder(this)
.setPointMap(pointMap)
.setGraphStroke(com.example.graphview.ResourceTable.Color_Black)
.setGraphGradient(com.example.curvegraphview.ResourceTable.Color_gradientStartColor2, com.example.curvegraphview.ResourceTable.Color_gradientEndColor2)
.animateLine(true)
.setPointColor(com.example.graphview.ResourceTable.Color_Red)
.setPointRadius(5)
.build();
PointMap p2 = new PointMap();
p2.addPoint(0, 440);
p2.addPoint(1, 0);
p2.addPoint(2, 100);
p2.addPoint(3, 0);
p2.addPoint(4, 400);
p2.addPoint(5, 200);
final GraphData gd2 = GraphData.builder(this)
.setPointMap(p2)
.setGraphStroke(com.example.graphview.ResourceTable.Color_Green)
.setGraphGradient(com.example.curvegraphview.ResourceTable.Color_gradientStartColor, com.example.curvegraphview.ResourceTable.Color_gradientEndColor)
.animateLine(true)
.build();
EventRunner runner = EventRunner.create(true);
if (runner == null) {
return;
}
new EventHandler(runner).postTask(new Runnable() {
@Override
public void run() {
curveGraphView.setData(5, 600, gd, gd2);
}
}, 250);
Copyright 2019 Swapnil Tiwari
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language admin permissions and
limitations under the License.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。