我正在尝试使用 vis.js 中的 Graph3d 创建一个 bar-color，我可以在其中根据 z 坐标值控制条形颜色。
我已经编写了一个引用示例的示例，此处条形颜色取决于条形的 z 坐标或高度。 viz.js 相对地分配条形颜色，红色表示低值，蓝色表示高值。
但问题是，如果所有数据点都有相似的值，即使实际值非常低，条形颜色也会接近蓝色。我希望低值始终为红色，高值始终为绿色/蓝色。有没有办法在 viz.js 中实现这一点？
var data = null;
var graph = null;
/**
* Returns a random number between min (inclusive) and max (exclusive)
*/
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = 'bar-color';
// Create and populate a data table.
data = new vis.DataSet();
//Poppulating the data
for (var x = 1; x <= 10; x++) {
for (var y = 1; y <= 5; y++) {
var z = getRandomArbitrary(1,5);
data.add({x:x, y:y, z:z, style:5-z});
}
}
// specify options
var options = {
width: '700px',
height: '700px',
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
verticalRatio: 0.5,
zMin: 0,
zMax: 5,
xStep: 1,
xCenter: '50%',
yCenter: '30%',
// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) {
// parameter point contains properties x, y, z
return 'value: <b>' + point.z + '</b>';
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
var pos = {horizontal: 1.0, vertical: 0.5, distance: 2};
graph.setCameraPosition(pos);
}
drawVisualization();html, body {font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vis/3.6.4/vis.min.js">
</script>
<body>
<div id="mygraph"></div>
</body>这是 jsfiddle link .
我是 vis.js 的初学者，即使在他们的文档上花了几个小时也找不到实现这一目标的方法。如果有任何其他开源图形解决方案可以渲染类似的图形，我很想知道。
最佳答案
颜色取决于 z 轴的比例。如果您手动将轴范围设置为 0-100，而所有数据的值都在 90-100 范围内，则所有数据点都将为红色，并且图表看起来几乎是平坦的。如果您让比例自动确定，它将只适合数据并将颜色从最小值 (90) 缩放到最大值 (100)。
没有官方功能可以提供您自己的色标函数，但您可以做的是将(内部使用的)graph3d._hsv2rgb(h, s, v) 方法替换为您自己的色标函数。
关于javascript - vis.js 3D条形图: Set bar color based on z-coordinate value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35195665/