如何将表形成三维视图？

<!doctype html>
<html lang="zh-cn">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"/>
    <style>.highcharts-credits{display:none;}</style>
</head>
<body>
<div id="container"></div>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
$(function () {
var data = [{
name:"张三",
quesNum:1,
grade:85
},{
name:"张三",
quesNum:2,
grade:75
},{
name:"张三",
quesNum:3,
grade:70
},{
name:"李四",
quesNum:1,
grade:90
},{
name:"李四",
quesNum:2,
grade:80
},{
name:"李四",
quesNum:3,
grade:70
}];

Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
}); var importData = [];
var start = 0;
var relate = {},reserve = {};

for(var i = 0,o;o = data[i];i++){
if(!relate[o.name]){
relate[o.name] = ++start;
}
importData.push([start,o.quesNum,o.grade/10])
}
for(var prop in relate){
reserve[relate[prop]] = prop;
} var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
tooltip: {
   formatter:function(){
  return '<p>' + reserve[this.point.x] + '，第' + this.point.y + '题' + this.point.z * 10 + '分</p>'
   }
},
title: {
text: '成绩表'
},
subtitle: {
text: '三维图'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10
},
legend: {
enabled: false
},
series: [{
name: '成绩表',
data: importData
}]
}); $(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
e = chart.pointer.normalize(e);
var posX = e.pageX,
posY = e.pageY,
alpha = chart.options.chart.options3d.alpha,
beta = chart.options.chart.options3d.beta,
newAlpha,
newBeta,
sensitivity = 5;
$(document).bind({
'mousemove.hc touchdrag.hc': function (e) {
newBeta = beta + (posX - e.pageX) / sensitivity;
newBeta = Math.min(100, Math.max(-100, newBeta));
chart.options.chart.options3d.beta = newBeta;
newAlpha = alpha + (e.pageY - posY) / sensitivity;
newAlpha = Math.min(100, Math.max(-100, newAlpha));
chart.options.chart.options3d.alpha = newAlpha;
chart.redraw(false);
},
'mouseup touchend': function () {
$(document).unbind('.hc');
}
});
});
});
    </script>
</body>
</html>

我想把姓名作为x轴题号，知识点作为y轴分数作为z轴，想把坐标点连接起来，你能帮我做出来吗？

vis.js做3D图表不错的
http://visjs.org/graph3d_examples.html

数据太少，看不出像个啥<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../dist/vis.js?ver=01"></script>
    <script type="text/javascript">
        var data = null;
        var graph = null;        var names = {};
        names[1] = '张三';
        names[2] = '李四';        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create and populate a data table.
            data = new vis.DataSet();
            data.add({ name: '张三', x: 1, y: 1, z: 85 });
            data.add({ name: '张三', x: 1, y: 2, z: 75 });
            data.add({ name: '张三', x: 1, y: 3, z: 70 });
            data.add({ name: '李四', x: 2, y: 1, z: 90 });
            data.add({ name: '李四', x: 2, y: 2, z: 80 });
            data.add({ name: '李四', x: 2, y: 3, z: 75 });            // specify options
            var options = {
                width: '600px',
                height: '400px',
                style: 'surface',
                valueMin: 0,
                valueMax: 100,
                showPerspective: true,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.2,
                xValueLabel: function (x) {
                    return x == parseInt(x) ? names[x] : '';
                },
                tooltip: function (node) {
                    return node.data.name + '，题号：' + node.y + '，分数：' + node.z;
                }
            };            // Instantiate our graph object.
            var container = document.getElementById('mygraph');
            graph = new vis.Graph3d(container, data, options);
        }
    </script>
</head>
<body onload="drawVisualization();">
    <div id="mygraph"></div>
    <div id="info"></div>
</body>
</html>

我把代码改成从数据库获取数据后，三维图都没展示出来<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://visjs.org/dist/vis.js?ver=01"></script>
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script type="text/javascript">
     $(function () {
var url = "selectAllGradeS.do";
$.post(url,{},function(res){
var data = null;
        var graph = null;         var names = new Array();
var data1 = res.pageData;
// alert(JSON.stringify(data1));
$.each(data1,function(index,value){
var name = value.name;
// var names = {};
var flag = true;
$.each(names,function(index1,value1){
var name1 = value1;
if(name == name1){
flag = false;
}
});
if(flag){
var ind1 = ind;
names[ ind1 ] = name;
ind++;
}
});
// Called when the Visualization API is loaded.
            // Create and populate a data table.
            data = new vis.DataSet();
            $.each(res.pageData,function(index,value){
             var index2 = 0;
             $.each(names,function(index1,value1){
if(value.name == value){
index2 = index1;
};
});
             data.add({ name: value.name , x: index2, y: value.quesNum, z: value.grade});
            });
            //alert(JSON.stringify(data));
            /*
            data.add({ name: '张三', x: 1, y: 1, z: 85 });
            data.add({ name: '张三', x: 1, y: 2, z: 75 });
            data.add({ name: '张三', x: 1, y: 3, z: 70 });
            data.add({ name: '李四', x: 2, y: 1, z: 90 });
            data.add({ name: '李四', x: 2, y: 2, z: 80 });
            data.add({ name: '李四', x: 2, y: 3, z: 75 });*/             // specify options
            var options = {
                width: '600px',
                height: '400px',
                style: 'surface',
                valueMin: 0,
                valueMax: 100,
                showPerspective: true,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.2,
                xValueLabel: function (x) {
                    return x == parseInt(x) ? names[x] : '';
                },
                tooltip: function (node) {
                    return node.data.name + '，题号：' + node.y + '，分数：' + node.z;
                }
            };             // Instantiate our graph object.
            var container = document.getElementById('mygraph');
            graph = new vis.Graph3d(container, data, options);
},'json');
     });

    </script>
</head>
<body>
    <div id="mygraph"></div>
    <div id="info"></div>
</body>
</html>

调试易

如何将表形成三维视图？

解决方案 »