无法用Plotly JS复现Plotly Express Python散点图的技术求助

首先得明确：Plotly Express（Python）会自动处理离散变量的映射逻辑——比如把不同的color/symbol值自动分配颜色、标记符号，还会生成对应的图例；但Plotly JS（尤其是基础版）需要你手动配置这些映射规则，这就是你代码不符合预期的核心原因。下面是针对性的修复方案：

1. 核心问题拆解 #

你的JS代码里存在几个关键问题：

• size传的是字符串数组，Plotly JS要求marker.size必须是数值类型，字符串不会生效
• 离散的color值（比如"1"、"2"）没有配置颜色映射，JS不会自动给不同值分配不同颜色
• 没有配置对应图例的标签（对应Python里的labels参数）
• 基础版plotly.js-basic-dist可能缺少部分颜色/符号的内置支持

2. 修复后的React代码示例 #

import React, { Component } from 'react'
import './page.css'
// 建议换成完整版plotly.js，基础版功能受限
import Plotly from "plotly.js";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

// 手动创建映射字典，对齐Plotly Express的自动映射逻辑
const colorMap = {
  "1": "#1f77b4",
  "2": "#ff7f0e",
  "3": "#2ca02c",
  "4": "#d62728",
  "6": "#9467bd",
  "11": "#8c564b",
  "12": "#e377c2",
  "14": "#7f7f7f"
};
const symbolMap = {
  "S": "square",  // 对应Python里的"S"标记，可按需调整
  "E": "circle"   // 对应Python里的"E"标记
};

export default class PCA extends Component {
  render() {
    // 原始数据
    const xData = [-5.691238139127018, 16.02561825924827, -19.482347122543963, 22.79664620239432, 9.27281358669174, -19.89458153037701, -2.1475704679740293, 0.8395889051651714, -5.162839175882285, -1.8356646308243358, -13.854581667215033, 6.155185565188921, 14.41696750169902, -12.413456433571344, 17.97832792203258, -7.002868774905083];
    const yData = [0.078247758751456, 4.471210394686129, 16.496418817153604, 7.088318145789984, -2.501368997923566, -4.159977694060695, -7.335497257865577, 4.605541034829036, -9.85701386098633, 7.174241441255795, -10.40241299755566, -10.76765189142554, 11.382045078953835, -17.98191393628625, -9.722118669880018];
    const symbolRaw = ["S","S","S","S","S","S","S","S","E","E","E","E","E","E","E","E"];
    const sizeRaw = ["1", "1", "1", "1", "1", "1", "1", "1", "27", "33", "15", "50", "25", "27", "1", "33"];
    const colorRaw = ["1","2","3","4","6","11","12","14","1","2","3","4","6","11","12","14"];

    // 预处理数据：转换类型+映射颜色/符号
    const mappedColors = colorRaw.map(c => colorMap[c]);
    const mappedSymbols = symbolRaw.map(s => symbolMap[s]);
    const mappedSizes = sizeRaw.map(s => Number(s));

    return (
      <div className='PCA'>
        PCA
        <Plot
          data={[
            {
              x: xData,
              y: yData,
              type: 'scatter',
              mode: 'markers',
              marker: {
                symbol: mappedSymbols,
                size: mappedSizes,
                color: mappedColors,
                // 可选：添加白色边框让标记更清晰
                line: { width: 1, color: '#ffffff' }
              },
            }
          ]}
          layout={{
            width: 500,
            height: 500,
            title: 'Patient Health Plot',
            // 替换成你labels['0']和labels['1']的实际文本
            xaxis: { title: 'X Axis Label' },
            yaxis: { title: 'Y Axis Label' },
            legend: { title: { text: 'Patient' } },
            // 配置颜色图例，对应Python里的labels['color']
            coloraxis: {
              colorbar: { title: { text: 'Patient' } },
              colorscale: Object.values(colorMap)
            }
          }}
        />
      </div>
    )
  }
}

3. 关键说明 #

• 映射字典：colorMap和symbolMap完全对齐Plotly Express的默认配色/标记逻辑，你可以根据需求自定义调整
• 数据类型转换：size必须转为数值类型，否则Plotly JS会忽略该配置
• 版本选择：完整版plotly.js包含所有内置颜色集和标记符号，避免基础版的功能缺失问题
• 图例配置：通过layout.legend和coloraxis实现Python代码中labels参数的效果，确保图表注释一致

如果需要让每个Patient单独显示在图例中（和Python版完全一致），可以把数据拆分为多个trace，每个trace对应一个Patient的x/y数据，设置对应的color、symbol、size，图例会自动分组显示。

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