如何控制Google散点图中各数据点的绘制顺序

Google Charts 核心散点/组合图表默认按系列整体优先级绘制，行数据排列顺序不影响点的层级，以下是两种可实现逐点自定义绘制顺序的方案：

方案1：拆分单点子系列（官方API兼容，稳定性高） #

将每个需要自定义绘制顺序的点拆分为独立的散点系列，系列的排列顺序即为点的绘制顺序，后定义的系列层级更高。可通过series配置项为每个子系列指定与原系列一致的颜色，同时隐藏多余的图例项。

对应需求改造后的代码示例：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // 按期望的绘制顺序定义每个点：[x值, y值, 所属原系列ID, 系列图例名]
  const customOrderPoints = [
    [0.1, 0.5, 'y0', '系列y0'],
    [0.1, 0.5, 'y1', '系列y1'],
    [0.6, 0.1, 'y1', '系列y1'],
    [0.6, 0.1, 'y0', '系列y0']
  ]
  // 原系列对应颜色，可自行修改
  const seriesColorMap = {
    y0: '#3366cc',
    y1: '#dc3912'
  }
  // 构建DataTable列：1个x列 + n个y列（n=点的数量）
  const cols = [{id: "x", label: "xValues", type: "number", role: "domain"}]
  const seriesConfig = {}
  customOrderPoints.forEach((point, idx) => {
    cols.push({id: `p${idx}`, type: "number", role: "data"})
    seriesConfig[idx] = {
      type: 'scatter',
      color: seriesColorMap[point[2]],
      // 仅第一个同系列的点显示在图例，避免重复
      visibleInLegend: idx < 2
    }
  })
  // 构建行数据，每个点单独占一行，仅对应列有值
  const rows = customOrderPoints.map((point, idx) => {
    const rowVals = new Array(cols.length).fill(null)
    rowVals[0] = point[0]
    rowVals[idx + 1] = point[1]
    return {c: rowVals.map(val => val ? {v: val} : {})}
  })

  const dt = new google.visualization.DataTable({cols, rows})
  const options = {
    seriesType: 'scatter',
    series: seriesConfig
  }
  const chart = new google.visualization.ComboChart(document.getElementById('container'))
  chart.draw(dt, options)
})

该方案最终渲染效果完全符合预期：(0.1, 0.5)位置显示y1的点，(0.6, 0.1)位置显示y0的点，同时图例仅保留两个原系列的入口，交互逻辑和原生图表完全一致。

方案2：渲染后调整SVG节点顺序（适合大数据量场景） #

如果数据点量级很大，拆分系列会导致配置冗余，可以在图表渲染完成后，直接调整SVG中散点元素的DOM顺序（SVG中后插入的节点层级更高，会覆盖上层元素）。
代码示例：

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = {
        cols: [
          {id: "x", label: "xValues", type: "number", role: "domain"},
          {id: "y0", label: "y0Values", type: "number", role: "data"},
          {id: "y1", label: "y1Values", type: "number", role: "data"}
        ],
        rows: [
          {c: [{v: 0.1}, {v: 0.5}, {}]},
          {c: [{v: 0.1}, {}, {v: 0.5}]},
          {c: [{v: 0.6}, {v: 0.1}, {}]},
          {c: [{v: 0.6}, {}, {v: 0.1}]}
        ]
      };
  var dt = new google.visualization.DataTable(data);
  var options = {seriesType: 'scatter'};
  var chart = new google.visualization.ComboChart(document.getElementById('container'));
  
  // 监听ready事件，渲染完成后调整节点顺序
  google.visualization.events.addListener(chart, 'ready', function() {
    const container = document.getElementById('container')
    // 拿到所有散点元素，注意类名要和当前版本Google Charts渲染的类名匹配
    const allPoints = Array.from(container.querySelectorAll('g[series_id] circle'))
    // 按期望的顺序排序：索引对应原数据中点的顺序，可自行自定义排序规则
    const customOrder = [0, 2, 3, 1]
    const svgGroup = allPoints[0].parentNode
    // 按自定义顺序重新插入节点
    customOrder.forEach(idx => {
      svgGroup.appendChild(allPoints[idx])
    })
  })

  chart.draw(dt, options);
});

该方案不需要修改原数据结构，适合万级以上数据点的场景，缺点是依赖Google Charts的内部DOM渲染规则，版本更新时需要验证兼容性。

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