vis.js 3D 条形图:根据 z 坐标值设置条形颜色

vis.js 3D bar graph: Set bar color based on z-coordinate value

本文关键字：设置 颜色 坐标 3D js 条形图 根据 vis      更新时间：2023-09-26

我正在尝试使用 vis.js 中的 Graph3d 创建一个bar-color，我可以根据 z 坐标值控制条形颜色。

我写了一个参考示例的示例，这里的条形颜色取决于条形的 z 坐标或高度。 即.js相对分配条形颜色，红色表示低值，蓝色表示高值。

但问题是，如果所有数据点都具有相似的值，即使实际值非常低，条形颜色也会接近蓝色。我希望低值始终为红色，而高水平始终为绿色/蓝色。有没有办法在可视化.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链接。

我是 vis 的初学者.js即使在他们的文档上花费了数小时也无法找到实现这一目标的方法。如果还有其他开源图形解决方案可以做到这一点，可以渲染类似的图形，我很想知道这一点。

颜色取决于 z 轴的比例。如果手动将轴范围设置为 0-100，而所有数据的值都在 90-100 范围内，则所有数据点都将为红色，并且图形看起来几乎是平坦的。如果让比例自动确定，它将仅拟合数据并将颜色从最小值 （90） 缩放到最大值 （100）。

没有官方功能可以提供您自己的色阶函数，但您可以做的是将（内部使用的）graph3d._hsv2rgb（h，s，v）方法替换为您自己的色阶函数。

相关文章：