如何用Kibana/Vega/Vega-Lite实现多X轴自定义可视化？

Let's walk through building your desired multi-X-axis visualization step by step, using your student grades data. First, let's clarify the setup: your CSV data has a student name followed by four scores (I’ll assume these correspond to subjects like Math, English, Science, History for clarity—adjust field names to match your actual index).

Step 1: Fix the Data Source in Vega-Lite #

First, update your data block to fetch all relevant fields from your Kibana grades index. Replace the placeholder ... with your actual score field names:

"data": {
  "url": {
    "%context%": true,
    "index": "grades",
    "body": {
      "size": 1000, // Increase this if you have more than 1000 students
      "_source": ["StudentName", "Math", "English", "Science", "History"]
    }
  }
}

Step 2: Reshape Data to Long Format #

Your data is in "wide" format (each row has multiple scores). Vega-Lite works better with "long" format for multi-axis plots, so we’ll use the fold transform to convert subject-score pairs into individual rows:

"transform": [
  {
    "fold": ["Math", "English", "Science", "History"],
    "as": ["Subject", "Score"]
  }
]

Step 3: Build the Multi-X-Axis Visualization #

To create separate X-axes for each subject, we’ll use layered marks where each layer corresponds to a subject, with its own X-axis configured to sit at distinct vertical positions. Here’s the full Vega-Lite spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": {
      "%context%": true,
      "index": "grades",
      "body": {
        "size": 1000,
        "_source": ["StudentName", "Math", "English", "Science", "History"]
      }
    }
  },
  "transform": [
    {
      "fold": ["Math", "English", "Science", "History"],
      "as": ["Subject", "Score"]
    }
  ],
  "layer": [
    // Math X-axis (bottommost)
    {
      "mark": "point",
      "encoding": {
        "y": {"field": "StudentName", "type": "nominal", "axis": {"title": "Student"}},
        "x": {"field": "Score", "type": "quantitative", "axis": {"title": "Math", "orient": "bottom", "offset": 0}},
        "color": {"value": "#1f77b4"},
        "opacity": {"condition": {"test": "datum.Subject === 'Math'", "value": 1}, "value": 0}
      }
    },
    // English X-axis (offset upward)
    {
      "mark": "point",
      "encoding": {
        "y": {"field": "StudentName", "type": "nominal", "axis": null}, // Hide duplicate Y-axis
        "x": {"field": "Score", "type": "quantitative", "axis": {"title": "English", "orient": "bottom", "offset": 30}},
        "color": {"value": "#ff7f0e"},
        "opacity": {"condition": {"test": "datum.Subject === 'English'", "value": 1}, "value": 0}
      }
    },
    // Science X-axis (offset upward further)
    {
      "mark": "point",
      "encoding": {
        "y": {"field": "StudentName", "type": "nominal", "axis": null},
        "x": {"field": "Score", "type": "quantitative", "axis": {"title": "Science", "orient": "bottom", "offset": 60}},
        "color": {"value": "#2ca02c"},
        "opacity": {"condition": {"test": "datum.Subject === 'Science'", "value": 1}, "value": 0}
      }
    },
    // History X-axis (topmost of the bottom axes)
    {
      "mark": "point",
      "encoding": {
        "y": {"field": "StudentName", "type": "nominal", "axis": null},
        "x": {"field": "Score", "type": "quantitative", "axis": {"title": "History", "orient": "bottom", "offset": 90}},
        "color": {"value": "#d62728"},
        "opacity": {"condition": {"test": "datum.Subject === 'History'", "value": 1}, "value": 0}
      }
    }
  ],
  "resolve": {
    "scale": {"x": "independent"} // Use separate scales for each X-axis
  }
}

Key Features Explained: #

• Layered Marks: Each subject gets its own layer with distinct colored points. The opacity condition ensures only the relevant subject’s data is visible in each layer.
• Independent X Scales: The resolve.scale.x: independent setting lets each X-axis use its own scale (so scores are plotted relative to their subject’s range, not a shared range).
• Offset Axes: The offset property on each X-axis positions them vertically below each other to avoid overlap.
• Single Y-Axis: Only the first layer shows the Y-axis (student names) to keep the plot clean and uncluttered.

Customization Tips: #

• Replace Math, English, etc., with your actual field names from the Kibana index.
• Swap point marks for bar if you prefer bar charts (adjust the mark property in each layer).
• Adjust the offset values to change spacing between axes.
• Modify the color values to match your preferred color palette.
• If you want some axes at the top of the plot, change orient: "bottom" to orient: "top" and adjust offsets accordingly.

Verifying Your Kibana Index Fields #

If you’re unsure about the exact field names in your grades index, run this query in Kibana Dev Tools to check:

GET grades/_mapping

This will return the full mapping for your index, including all field names to use in your Vega-Lite spec.

内容的提问来源于stack exchange，提问作者Sneijky