第8章 高级可视化图表

// 创建等高线图数据
const size = 100;
const x = [];
const y = [];
const z = [];

for (let i = 0; i < size; i++) {
    x[i] = [];
    y[i] = [];
    z[i] = [];
    
    for (let j = 0; j < size; j++) {
        const xVal = -3 + j * 6 / size;
        const yVal = -2 + i * 4 / size;
        x[i][j] = xVal;
        y[i][j] = yVal;
        z[i][j] = Math.exp(-(xVal * xVal + yVal * yVal));
    }
}

// 使用Plotly绘制等高线图
const data = [{
    x: x[0],
    y: y.map(row => row[0]),
    z: z,
    type: 'contour',
    colorscale: 'Viridis'
}];

const layout = {
    title: '等高线图示例',
    autosize: true
};

Plotly.newPlot('contour-chart', data, layout);

// 创建流线图数据
const size = 30;
const x = [];
const y = [];
const u = [];
const v = [];

for (let i = 0; i < size; i++) {
    x[i] = [];
    y[i] = [];
    u[i] = [];
    v[i] = [];
    
    for (let j = 0; j < size; j++) {
        const xVal = -3 + j * 6 / size;
        const yVal = -3 + i * 6 / size;
        x[i][j] = xVal;
        y[i][j] = yVal;
        u[i][j] = -1 - xVal * xVal + yVal;
        v[i][j] = 1 + xVal - yVal * yVal;
    }
}

// 使用Plotly绘制流线图
const data = [{
    type: 'stream',
    x: x,
    y: y,
    u: u,
    v: v,
    colorscale: 'Viridis'
}];

const layout = {
    title: '矢量场流线图',
    autosize: true
};

Plotly.newPlot('streamplot-chart', data, layout);

// 桑基图数据
const data = {
  type: "sankey",
  orientation: "h",
  node: {
    pad: 15,
    thickness: 15,
    line: {
      color: "black",
      width: 0.5
    },
    label: ["工资", "副业", "总收入", "生活", "购物", "深造", "运动", "其他", "买书", "总支出"]
  },
  link: {
    source: [0, 1, 2, 2, 2, 2, 2, 2],
    target: [2, 2, 3, 4, 5, 6, 7, 8],
    value: [0.7, 0.3, 0.3, 0.1, 0.3, 0.1, 0.1, 0.1]
  }
};

const layout = {
  title: "个人收支桑基图",
  font: {
    size: 10
  }
};

Plotly.newPlot('sankey-chart', [data], layout);

// 创建树状图数据
const data = {
  type: "treemap",
  labels: ["公司", "研发部", "市场部", "销售部", "财务部", "人力部", 
           "前端组", "后端组", "测试组", "推广组", "品牌组",
           "国内销售", "海外销售", "会计组", "审计组"],
  parents: ["", "公司", "公司", "公司", "公司", "公司",
            "研发部", "研发部", "研发部", "市场部", "市场部",
            "销售部", "销售部", "财务部", "财务部"],
  values: [100, 30, 25, 25, 10, 10,
           10, 12, 8, 12, 13,
           13, 12, 6, 4],
  textinfo: "label+value+percent parent",
  branchvalues: "total"
};

const layout = {
  title: "公司组织结构树状图",
  margin: {l: 0, r: 0, b: 0, t: 30}
};

Plotly.newPlot('treemap-chart', [data], layout);

// 华夫饼图数据
const categories = ['产品A', '产品B', '产品C', '产品D', '其他'];
const values = [0.3, 0.25, 0.2, 0.15, 0.1];
const colors = ['#FF5252', '#448AFF', '#69F0AE', '#FFD740', '#B388FF'];
const size = 10;

// 创建热图数据
const data = [];
let startIdx = 0;

for (let i = 0; i < values.length; i++) {
    const count = Math.floor(values[i] * size * size);
    for (let j = 0; j < count; j++) {
        data.push(i + 1);
    }
    startIdx += count;
}

// 补充剩余数据为0
while (data.length < size * size) {
    data.push(0);
}

// 重塑为二维数组
const heatmapData = [];
for (let i = 0; i < size; i++) {
    heatmapData[i] = [];
    for (let j = 0; j < size; j++) {
        heatmapData[i][j] = data[i * size + j];
    }
}

// 使用Plotly绘制热图
const plotData = [{
    z: heatmapData,
    type: 'heatmap',
    colorscale: [
        [0, 'rgba(255,255,255,1)'],
        [1/(categories.length + 1), 'rgba(255,255,255,1)'],
        [2/(categories.length + 1), colors[0]],
        [3/(categories.length + 1), colors[1]],
        [4/(categories.length + 1), colors[2]],
        [5/(categories.length + 1), colors[3]],
        [1, colors[4]]
    ],
    showscale: false,
    xgap: 2,
    ygap: 2
}];

const layout = {
    title: '市场份额华夫饼图',
    xaxis: {showgrid: false, showticklabels: false},
    yaxis: {showgrid: false, showticklabels: false},
    margin: {l: 50, r: 150, b: 50, t: 50},
    height: 450,
    annotations: []
};

// 添加图例
for (let i = 0; i < categories.length; i++) {
    const percentage = (values[i] * 100).toFixed(0);
    layout.annotations.push({
        x: 1.05,
        y: 1 - (i * 0.1),
        xref: 'paper',
        yref: 'paper',
        text: `■ ${categories[i]}: ${percentage}%`,
        showarrow: false,
        font: {size: 12}
    });
}

Plotly.newPlot('waffle-chart', plotData, layout);

// 甘特图数据
const tasks = ['项目确定', '问卷设计', '试访', '问卷确定', '实地执行', 
               '数据录入', '数据分析', '报告提交'];
const startDays = [0, 1.5, 2.5, 3.5, 3, 5.5, 6, 7.5];
const durations = [2, 1, 0.5, 0.5, 3, 1, 1.5, 0.5];
const colors = ['#FF5252', '#448AFF', '#69F0AE', '#FFD740', '#B388FF', 
               '#FF4081', '#00BCD4', '#8BC34A'];

// 创建甘特图数据
const traces = [];
for (let i = 0; i < tasks.length; i++) {
    traces.push({
        x: [startDays[i], startDays[i] + durations[i]],
        y: [tasks[i], tasks[i]],
        mode: 'lines',
        line: {
            color: colors[i],
            width: 20
        },
        hoverinfo: 'text',
        text: `${tasks[i]}: 第${startDays[i]}天开始，持续${durations[i]}天`
    });
}

const layout = {
    title: '项目甘特图',
    xaxis: {
        title: '天数',
        range: [0, 10]
    },
    yaxis: {
        title: '任务',
        autorange: 'reversed'
    },
    margin: {l: 100, r: 50, b: 50, t: 50},
    height: 400
};

Plotly.newPlot('gantt-chart', traces, layout);

// 漏斗图数据
const stages = ['访问商品', '加购物车', '生成订单', '支付订单', '完成交易'];
const values = [1000, 500, 300, 200, 150];

// 计算百分比
const percentages = values.map((val, idx) => {
    return idx === 0 ? 100 : Math.round((val / values[0]) * 100);
});

// 创建漏斗图
const maxValue = Math.max(...values);
const x2 = values.map(val => (maxValue - val) / 2);
const x3 = values.map((val, idx) => val + x2[idx]);

// 使用Plotly绘制漏斗图
const data = [{
    type: 'funnel',
    y: stages,
    x: values,
    textinfo: 'value+percent initial',
    textposition: 'inside',
    marker: {
        color: ['#4E79A7', '#F28E2C', '#E15759', '#76B7B2', '#59A14F'],
        line: {color: 'white', width: 2}
    },
    connector: {line: {color: 'white', dash: 'dot', width: 3}}
}];

const layout = {
    title: '购物流程漏斗图',
    margin: {l: 100, r: 50, b: 50, t: 50},
    height: 400,
    font: {
        size: 12
    }
};

Plotly.newPlot('funnel-chart', data, layout);