feat: bar column label position

Author: xuwei-fit2cloud

g2-ssr/app.js

@@ -3,10 +3,6 @@ const url = require("url");
 const util = require('util');
 const { createChart } = require('@antv/g2-ssr');
 const port = 3000;
-const { getPieOptions } = require('./charts/pie.js');
-const { getLineOptions } = require('./charts/line.js');
-const { getColumnOptions } = require('./charts/column.js');
-const { getBarOptions } = require('./charts/bar.js');
 
 http.createServer((req, res) => {
     res.statusCode = 200,
@@ -20,48 +16,35 @@ http.createServer((req, res) => {
     console.log(`Server listening on: http://localhost:${port}`);
 });
 
-function getOptions(type, axis, data) {
-
-    const base_options = {
+// 创建 Chart 和配置
+async function GenerateCharts(obj) {
+    const options = JSON.parse(obj.options || "{}") || {
         width: 640,
         height: 480,
-        imageType: 'png',
-        theme: {
-            view: {
-                viewFill: '#FFFFFF',
-            },
-        }
+        imageType: 'png', // or 'jpeg'
+        // 其他的配置透传 G2 Spec，可以参考 G2 的配置文档
+        type: 'interval',
+        data: [
+            { genre: ' UIUI看看', sold: 278 },
+            { genre: 'Strategy', sold: 115 },
+            { genre: 'Action', sold: 120 },
+            { genre: 'Shooter', sold: 350 },
+            { genre: 'Other', sold: 150 },
+        ],
+        encode: {
+            x: 'genre',
+            y: 'sold',
+            color: 'genre',
+        },
     }
-
-    switch (type) {
-        case 'bar':
-            return getBarOptions(base_options, axis, data);
-        case 'column':
-            return getColumnOptions(base_options, axis, data);
-        case 'line':
-            return getLineOptions(base_options, axis, data);
-        case 'pie':
-            return getPieOptions(base_options, axis, data);
-    }
-
-    return base_options
-}
-
-
-// 创建 Chart 和配置
-async function GenerateCharts(obj) {
-    console.log(obj)
-    const options = getOptions(obj.type, JSON.parse(obj.axis), JSON.parse(obj.data));
-    console.log(options);
     const chart = await createChart(options);
 
     // 导出
-    chart.exportToFile(obj.path || 'chart');
+    chart.exportToFile(obj.id || 'chart');
     // -> chart.png
 
     chart.toBuffer();
 }
-
 // -> get buffer
 
 
@@ -74,8 +57,8 @@ function toGet(req, res) {
 
 //获取POST请求内容、cookie 
 function toPost(req, res) {
-    req.on('data', async function (chunk) {
-        await GenerateCharts(JSON.parse(chunk))
+    req.on('data', function (chunk) {
+        GenerateCharts(JSON.parse(chunk))
         res.end('complete');
     });
 }

g2-ssr/charts/bar.js

@@ -93,6 +93,12 @@ function getBarOptions(baseOptions, axis, data) {
                     }
                     return `${value}${_data.isPercent ? '%' : ''}`
                 },
+                position: (data) => {
+                    if (data[y[0].value] < 0) {
+                        return 'bottom'
+                    }
+                    return 'top'
+                },
                 transform: [
                     {type: 'contrastReverse'},
                     {type: 'exceedAdjust'},

g2-ssr/charts/column.js

@@ -92,7 +92,12 @@ function getColumnOptions(baseOptions, axis, data) {
                     }
                     return `${value}${_data.isPercent ? '%' : ''}`
                 },
-                position: 'top',
+                position: (data) => {
+                    if (data[y[0].value] < 0) {
+                        return 'bottom'
+                    }
+                    return 'top'
+                },
                 dy: -25,
                 transform: [
                     {type: 'contrastReverse'},

g2-ssr/charts/utils.js

@@ -1,4 +1,4 @@
-const {filter, endsWith, replace} = require("lodash-es");
+const {filter, endsWith, replace} = require("lodash");
 
 function checkIsPercent(valueAxis, data) {
     const result = {

g2-ssr/package.json

@@ -6,7 +6,6 @@
     "@antv/g2": "^5.3.3",
     "@antv/g2-ssr": "^0.1.0",
     "@rollup/plugin-json": "^6.1.0",
-    "lodash-es": "^4.17.21",
     "nan": "^2.22.2",
     "node-canvas": "^2.9.0",
     "nprogress": "^0.2.0"