|
|
@@ -16,136 +16,178 @@
|
|
|
<body>
|
|
|
<div id="plot"></div>
|
|
|
<script>
|
|
|
- const xLabels = ["A", "B", "C"];
|
|
|
- const yLabels = ["Monday", "Tuesday", "Wednesday"];
|
|
|
- const dataMatrix = [
|
|
|
- [5, 8, 6],
|
|
|
- [4, 2, 9],
|
|
|
- [7, 3, 5],
|
|
|
- ];
|
|
|
+ //反转字符串
|
|
|
+ // let str = "1234567";
|
|
|
+ // 方法1:
|
|
|
+ // str.split("").reverse().join("");
|
|
|
+ // 方法2:
|
|
|
+ // const brr = str.split("").reduce((rev, ch) => {
|
|
|
+ // return ch + rev;
|
|
|
+ // }, "");
|
|
|
+ // console.log(brr, "brr");
|
|
|
+ // //递归
|
|
|
+ // function recursionFn(n) {
|
|
|
+ // if (n === 0) return 0; // 递归终止条件
|
|
|
+ // return n + recursionFn(n - 1);
|
|
|
+ // }
|
|
|
+ // console.log(recursionFn(10));
|
|
|
|
|
|
- // 构造立方体柱子
|
|
|
- const traces = [];
|
|
|
- const barWidth = 0.8;
|
|
|
+ //js map 方法
|
|
|
+ // if (!Array.prototype.myMap) {
|
|
|
+ // Array.prototype.myMap = function (callback, thisArg) {
|
|
|
+ // if (typeof callback !== "function") {
|
|
|
+ // console.error("callback 必须是一个函数");
|
|
|
+ // }
|
|
|
+ // console.log(this, thisArg);
|
|
|
+ // const arr = this;
|
|
|
+ // const result = new Array(arr.length);
|
|
|
+ // for (let i = 0; i < arr.length; i++) {
|
|
|
+ // if (!(i in arr)) continue;
|
|
|
+ // result[i] = callback.call(thisArg, arr[i], i, arr);
|
|
|
+ // }
|
|
|
+ // return result;
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // const numArray = [1, 4, null, 7, 3];
|
|
|
+ // const numResult = numArray.myMap(
|
|
|
+ // function (val, index) {
|
|
|
+ // console.log("myMap 回调函数", this.obj, val, index);
|
|
|
+ // return this.obj + val;
|
|
|
+ // },
|
|
|
+ // { obj: "这个是this" }
|
|
|
+ // );
|
|
|
+ // console.log(numResult, "numResult");
|
|
|
|
|
|
- for (let xi = 0; xi < xLabels.length; xi++) {
|
|
|
- for (let yi = 0; yi < yLabels.length; yi++) {
|
|
|
- const height = dataMatrix[yi][xi];
|
|
|
+ // const xLabels = ["A", "B", "C"];
|
|
|
+ // const yLabels = ["Monday", "Tuesday", "Wednesday"];
|
|
|
+ // const dataMatrix = [
|
|
|
+ // [5, 8, 6],
|
|
|
+ // [4, 2, 9],
|
|
|
+ // [7, 3, 5],
|
|
|
+ // ];
|
|
|
|
|
|
- const x = xi;
|
|
|
- const y = yi;
|
|
|
- const z = 0;
|
|
|
+ // // 构造立方体柱子
|
|
|
+ // const traces = [];
|
|
|
+ // const barWidth = 0.8;
|
|
|
|
|
|
- // 立方体8个顶点
|
|
|
- const vertices = [
|
|
|
- [x, y, z],
|
|
|
- [x + barWidth, y, z],
|
|
|
- [x + barWidth, y + barWidth, z],
|
|
|
- [x, y + barWidth, z],
|
|
|
- [x, y, z + height],
|
|
|
- [x + barWidth, y, z + height],
|
|
|
- [x + barWidth, y + barWidth, z + height],
|
|
|
- [x, y + barWidth, z + height],
|
|
|
- ];
|
|
|
+ // for (let xi = 0; xi < xLabels.length; xi++) {
|
|
|
+ // for (let yi = 0; yi < yLabels.length; yi++) {
|
|
|
+ // const height = dataMatrix[yi][xi];
|
|
|
|
|
|
- // 每个立方体的面（两个三角形组成一个面）
|
|
|
- const faces = [
|
|
|
- [0, 1, 2],
|
|
|
- [0, 2, 3], // bottom
|
|
|
- [4, 5, 6],
|
|
|
- [4, 6, 7], // top
|
|
|
- [0, 1, 5],
|
|
|
- [0, 5, 4], // front
|
|
|
- [1, 2, 6],
|
|
|
- [1, 6, 5], // right
|
|
|
- [2, 3, 7],
|
|
|
- [2, 7, 6], // back
|
|
|
- [3, 0, 4],
|
|
|
- [3, 4, 7], // left
|
|
|
- ];
|
|
|
+ // const x = xi;
|
|
|
+ // const y = yi;
|
|
|
+ // const z = 0;
|
|
|
|
|
|
- // 拆解为 Plotly mesh3d 的输入格式
|
|
|
- const xVals = vertices.map((v) => v[0]);
|
|
|
- const yVals = vertices.map((v) => v[1]);
|
|
|
- const zVals = vertices.map((v) => v[2]);
|
|
|
+ // // 立方体8个顶点
|
|
|
+ // const vertices = [
|
|
|
+ // [x, y, z],
|
|
|
+ // [x + barWidth, y, z],
|
|
|
+ // [x + barWidth, y + barWidth, z],
|
|
|
+ // [x, y + barWidth, z],
|
|
|
+ // [x, y, z + height],
|
|
|
+ // [x + barWidth, y, z + height],
|
|
|
+ // [x + barWidth, y + barWidth, z + height],
|
|
|
+ // [x, y + barWidth, z + height],
|
|
|
+ // ];
|
|
|
|
|
|
- const i = faces.map((f) => f[0]);
|
|
|
- const j = faces.map((f) => f[1]);
|
|
|
- const k = faces.map((f) => f[2]);
|
|
|
+ // // 每个立方体的面（两个三角形组成一个面）
|
|
|
+ // const faces = [
|
|
|
+ // [0, 1, 2],
|
|
|
+ // [0, 2, 3], // bottom
|
|
|
+ // [4, 5, 6],
|
|
|
+ // [4, 6, 7], // top
|
|
|
+ // [0, 1, 5],
|
|
|
+ // [0, 5, 4], // front
|
|
|
+ // [1, 2, 6],
|
|
|
+ // [1, 6, 5], // right
|
|
|
+ // [2, 3, 7],
|
|
|
+ // [2, 7, 6], // back
|
|
|
+ // [3, 0, 4],
|
|
|
+ // [3, 4, 7], // left
|
|
|
+ // ];
|
|
|
|
|
|
- traces.push({
|
|
|
- type: "mesh3d",
|
|
|
- x: xVals,
|
|
|
- y: yVals,
|
|
|
- z: zVals,
|
|
|
- i,
|
|
|
- j,
|
|
|
- k,
|
|
|
- opacity: 1,
|
|
|
- color: `rgb(${50 + xi * 50}, ${100 + yi * 50}, 200)`,
|
|
|
- flatshading: true,
|
|
|
- showscale: false,
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+ // // 拆解为 Plotly mesh3d 的输入格式
|
|
|
+ // const xVals = vertices.map((v) => v[0]);
|
|
|
+ // const yVals = vertices.map((v) => v[1]);
|
|
|
+ // const zVals = vertices.map((v) => v[2]);
|
|
|
+
|
|
|
+ // const i = faces.map((f) => f[0]);
|
|
|
+ // const j = faces.map((f) => f[1]);
|
|
|
+ // const k = faces.map((f) => f[2]);
|
|
|
+
|
|
|
+ // traces.push({
|
|
|
+ // type: "mesh3d",
|
|
|
+ // x: xVals,
|
|
|
+ // y: yVals,
|
|
|
+ // z: zVals,
|
|
|
+ // i,
|
|
|
+ // j,
|
|
|
+ // k,
|
|
|
+ // opacity: 1,
|
|
|
+ // color: `rgb(${50 + xi * 50}, ${100 + yi * 50}, 200)`,
|
|
|
+ // flatshading: true,
|
|
|
+ // showscale: false,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- const layout = {
|
|
|
- scene: {
|
|
|
- xaxis: {
|
|
|
- title: "X",
|
|
|
- tickvals: [0.4, 1.4, 2.4],
|
|
|
- ticktext: xLabels,
|
|
|
- },
|
|
|
- yaxis: {
|
|
|
- title: "Y",
|
|
|
- tickvals: [0.4, 1.4, 2.4],
|
|
|
- ticktext: yLabels,
|
|
|
- },
|
|
|
- zaxis: { title: "Z" },
|
|
|
- aspectratio: {
|
|
|
- x: 2.2,
|
|
|
- y: 1.7,
|
|
|
- z: 1,
|
|
|
- },
|
|
|
- bgcolor: "#e5ecf6",
|
|
|
- aspectmode: "manual",
|
|
|
- gridcolor: "#fff",
|
|
|
- camera: {
|
|
|
- up: {
|
|
|
- x: 0.200292643688136,
|
|
|
- y: 0.2488259353493132,
|
|
|
- z: 0.947612004346693,
|
|
|
- },
|
|
|
- center: {
|
|
|
- x: -0.052807476121180814,
|
|
|
- y: 0.02451796399554085,
|
|
|
- z: -0.022911006648570736,
|
|
|
- },
|
|
|
- eye: {
|
|
|
- x: -2.126379643342493,
|
|
|
- y: -2.551422475965373,
|
|
|
- z: 1.0917667684145647,
|
|
|
- },
|
|
|
- projection: {
|
|
|
- type: "orthographic",
|
|
|
- },
|
|
|
- },
|
|
|
- staticPlot: false,
|
|
|
- showlegend: true,
|
|
|
- legend: {
|
|
|
- itemsizing: "constant", // ✅ 统一图例 marker 大小
|
|
|
- font: {
|
|
|
- size: 12,
|
|
|
- },
|
|
|
- marker: {
|
|
|
- size: 10,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- margin: { t: 50, b: 50, l: 50, r: 50 },
|
|
|
- };
|
|
|
+ // const layout = {
|
|
|
+ // scene: {
|
|
|
+ // xaxis: {
|
|
|
+ // title: "X",
|
|
|
+ // tickvals: [0.4, 1.4, 2.4],
|
|
|
+ // ticktext: xLabels,
|
|
|
+ // },
|
|
|
+ // yaxis: {
|
|
|
+ // title: "Y",
|
|
|
+ // tickvals: [0.4, 1.4, 2.4],
|
|
|
+ // ticktext: yLabels,
|
|
|
+ // },
|
|
|
+ // zaxis: { title: "Z" },
|
|
|
+ // aspectratio: {
|
|
|
+ // x: 2.2,
|
|
|
+ // y: 1.7,
|
|
|
+ // z: 1,
|
|
|
+ // },
|
|
|
+ // bgcolor: "#e5ecf6",
|
|
|
+ // aspectmode: "manual",
|
|
|
+ // gridcolor: "#fff",
|
|
|
+ // camera: {
|
|
|
+ // up: {
|
|
|
+ // x: 0.200292643688136,
|
|
|
+ // y: 0.2488259353493132,
|
|
|
+ // z: 0.947612004346693,
|
|
|
+ // },
|
|
|
+ // center: {
|
|
|
+ // x: -0.052807476121180814,
|
|
|
+ // y: 0.02451796399554085,
|
|
|
+ // z: -0.022911006648570736,
|
|
|
+ // },
|
|
|
+ // eye: {
|
|
|
+ // x: -2.126379643342493,
|
|
|
+ // y: -2.551422475965373,
|
|
|
+ // z: 1.0917667684145647,
|
|
|
+ // },
|
|
|
+ // projection: {
|
|
|
+ // type: "orthographic",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // staticPlot: false,
|
|
|
+ // showlegend: true,
|
|
|
+ // legend: {
|
|
|
+ // itemsizing: "constant", // ✅ 统一图例 marker 大小
|
|
|
+ // font: {
|
|
|
+ // size: 12,
|
|
|
+ // },
|
|
|
+ // marker: {
|
|
|
+ // size: 10,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // margin: { t: 50, b: 50, l: 50, r: 50 },
|
|
|
+ // };
|
|
|
|
|
|
- Plotly.newPlot("plot", traces, layout);
|
|
|
+ // Plotly.newPlot("plot", traces, layout);
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
liujiejie