VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
775 stars 45 forks source link

[Feature] Bar Chart support linear type x axis #2758

Closed kkxxkk2019 closed 1 month ago

kkxxkk2019 commented 1 month ago

What problem does this feature solve?

柱状图 X 轴支持 linear 类型(存在一些数据分布不均匀的场景可视化需求),对齐 chartSpace 3.x(飞书 sheet 、图表助手上均有使用场景),如下:

image

现在的 VChart 绘制结果如下:

image
const spec = {
  "direction": "vertical",
  "type": "common",
  "color": [
    "#00295C",
    "#2568BD",
    "#9F9F9F",
    "#C5C5C5",
    "#00B0F0",
    "#4BCFFF",
    "#C2C2C2",
    "#D7D7D7"
  ],
  "series": [
    {
      "type": "bar",
      "stack": true,
      "direction": "vertical",
      "bar": {
        "style": {
          "stroke": "",
          "lineWidth": 1
        },
        "state": {
          "hover": {
            "stroke": "#000",
            "lineWidth": 1
          }
        }
      },
      "barBackground": {
        "style": {
          "stroke": "",
          "lineWidth": 1
        }
      },
      "label": {
        "visible": true,
        "position": "inside",
        "style": {
          "lineHeight": "100%",
          "fontSize": 16,
          "fontWeight": "bold"
        },
        "overlap": {
          "strategy": []
        },
        "smartInvert": true,
        "interactive": true
      },
      "totalLabel": {
        "visible": true,
        "position": "top",
        "overlap": false,
        "clampForce": false,
        "formatConfig": {
          "fixed": 0,
          "content": "value"
        },
        "style": {
          "lineHeight": "100%",
          "lineWidth": 1,
          "fill": "#1F2329",
          "stroke": "#ffffff",
          "fontSize": 16,
          "fontWeight": "bold"
        },
        "interactive": true
      },
      "seriesLabel": {
        "visible": true,
        "position": "end",
        "label": {
          "style": {
            "lineHeight": "100%",
            "lineWidth": 1,
            "stroke": "#ffffff",
            "fontSize": 16,
            "fontWeight": "bold"
          },
          "space": 10
        }
      },
      "xField": "_editor_dimension_field",
      "yField": "_editor_value_field",
      "dataId": "0",
      "id": "series-0",
      "EDITOR_SERIES_DATA_KEY": "Phones ",
      "seriesField": "_editor_type_field"
    }
  ],
  "legends": {
    "id": "legend-discrete",
    "visible": false,
    "autoPage": false,
    "position": "start",
    "interactive": false,
    "item": {
      "label": {
        "style": {
          "fill": "#1F2329",
          "fontSize": 16
        }
      }
    }
  },
  "region": [
    {
      "id": "region-0"
    }
  ],
  "tooltip": {
    "visible": true
  },
  "axes": [
    {
      "orient": "left",
      "id": "axis-left",
      "type": "linear",
      "label": {
        "autoLimit": false,
        "style": {
          "fill": "#1F2329",
          "fontSize": 16
        },
        "formatMethod": null
      },
      "domainLine": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        }
      },
      "tick": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        }
      },
      "grid": {
        "visible": false,
        "style": {
          "stroke": "#bbbfc4"
        }
      },
      "autoIndent": false,
      "maxWidth": null,
      "maxHeight": null,
      "linearToBand": false
    },
    {
      "orient": "bottom",
      "id": "axis-bottom",
      "type": "linear",
      "label": {
        "autoLimit": false,
        "style": {
          "fill": "#1F2329",
          "fontSize": 16
        }
      },
      "domainLine": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        },
        "onZero": true
      },
      "tick": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        }
      },
      "grid": {
        "visible": false,
        "style": {
          "stroke": "#bbbfc4"
        }
      },
      "autoIndent": false,
      "maxWidth": null,
      "maxHeight": null,
      "trimPadding": false,
      "paddingInner": [
        0.2,
        0
      ],
      "paddingOuter": [
        0.2,
        0
      ],
      "linearToBand": false
    }
  ],
  "data": [
    {
      "id": "0",
      "sourceKey": "Phones ",
      "values": [
        {
          "_editor_dimension_field": "76",
          "_editor_value_field": 76,
          "_editor_type_field": "Phones "
        },
        {
          "_editor_dimension_field": "69",
          "_editor_value_field": 69,
          "_editor_type_field": "Phones "
        },
        {
          "_editor_dimension_field": "45",
          "_editor_value_field": 45,
          "_editor_type_field": "Phones "
        },
        {
          "_editor_dimension_field": "74",
          "_editor_value_field": 74,
          "_editor_type_field": "Phones "
        },
        {
          "_editor_dimension_field": "65",
          "_editor_value_field": 65,
          "_editor_type_field": "Phones "
        },
        {
          "_editor_dimension_field": "80",
          "_editor_value_field": 80,
          "_editor_type_field": "Phones "
        }
      ]
    }
  ],
  "width": 640,
  "height": 360,
  "background": "transparent"
}

What does the proposed API look like?

NA