plot line test

ex-em · Oct 19, 2021 · 2a288eb · 2a288eb
1 parent c4839db
commit 2a288eb
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 96 deletions.
diff --git a/docs/views/lineChart/example/Default.vue b/docs/views/lineChart/example/Default.vue
@@ -21,17 +21,17 @@
     setup() {
       const chartData = reactive({
         series: {
-          series1: { name: 'series#1' },
-          series2: { name: 'series#2' },
-          series3: { name: 'series#3' },
-          series4: { name: 'series#4' },
+          series1: { name: 'series#1', point: false },
+          // series2: { name: 'series#2' },
+          // series3: { name: 'series#3' },
+          // series4: { name: 'series#4' },
         },
         labels: [],
         data: {
           series1: [],
-          series2: [],
-          series3: [],
-          series4: [],
+          // series2: [],
+          // series3: [],
+          // series4: [],
         },
       });
 
@@ -51,12 +51,32 @@
           type: 'time',
           timeFormat: 'HH:mm:ss',
           interval: 'second',
+          plotLines: [{
+            color: '#BC80BD',
+            lineWidth: 2,
+            value: 100.5,
+            lineStyle: 'dash',
+          }, {
+            color: '#FF00FF',
+            lineWidth: 2,
+            value: 340.5,
+          }],
         }],
         axesY: [{
           type: 'linear',
           showGrid: true,
           startToZero: true,
           autoScaleRatio: 0.1,
+          plotLines: [{
+            color: '#FF0000',
+            lineWidth: 2,
+            value: 60.5,
+            lineStyle: 'dash',
+          }, {
+            color: '#000000',
+            lineWidth: 2,
+            value: 50.5,
+          }],
         }],
       };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/chart/scale/scale.js b/src/components/chart/scale/scale.js
@@ -256,11 +256,6 @@ class Scale {
             });
           }
         }
-        if (this.showIndicator) {
-          ctx.moveTo(linePosition, offsetPoint + 6);
-          ctx.lineTo(linePosition, offsetPoint);
-        }
-
         if (ix !== 0 && this.showGrid) {
           ctx.moveTo(linePosition, offsetPoint);
           ctx.lineTo(linePosition, offsetCounterPoint);
@@ -273,11 +268,6 @@ class Scale {
           linePosition += 1;
         }
 
-        if (this.showIndicator) {
-          ctx.moveTo(offsetPoint - 6, linePosition);
-          ctx.lineTo(offsetPoint, linePosition);
-        }
-
         if (ix !== 0 && this.showGrid) {
           ctx.moveTo(offsetPoint, linePosition);
           ctx.lineTo(offsetCounterPoint, linePosition);
@@ -287,6 +277,37 @@ class Scale {
       ctx.stroke();
       ctx.closePath();
     }
+
+    // draw plot line
+    if (this.plotLines?.length) {
+      const padding = aliasPixel + 1;
+
+      this.plotLines.forEach((plotLine) => {
+        const { color, lineWidth, lineStyle, value } = plotLine;
+        ctx.beginPath();
+        ctx.save();
+        ctx.lineWidth = lineWidth;
+        ctx.strokeStyle = color;
+
+        if (lineStyle === 'dash') {
+          ctx.setLineDash([10, 5]);
+        }
+
+        if (this.type === 'x') {
+          const dp = aPos.x1 + value;
+          ctx.moveTo(dp, aPos.y2 + padding);
+          ctx.lineTo(dp, aPos.y1 + padding);
+        } else {
+          const dp = aPos.y2 - value;
+          ctx.moveTo(aPos.x1 + padding, dp);
+          ctx.lineTo(aPos.x2 + padding, dp);
+        }
+
+        ctx.stroke();
+        ctx.restore();
+        ctx.closePath();
+      });
+    }
   }
 }