plotly js：热图中色标的位置和长度

Question

使用plotly.js，您可以制作热图，热图右侧带有色标，一些 3d 图表也是如此。

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Jet',
    type: 'heatmap'
  }
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});

我正在努力查看 api 是否允许修改色标 location 和 length。 plotly.js 是否允许操纵这些属性，您是否有热图 and/or 3d 图的示例？

Answer 1

您可以通过将以下行添加到 data 来设置 colorbar 的 position and length：

colorbar: {x: -.5, len: 0.5}

下面是一个颜色条被推到左边并且是常规大小的一半的片段。

Plotly.d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
var data = [{
    z: figure.z,
    colorscale: 'Jet',
    type: 'heatmap',
    colorbar: {x: -.5, len: 0.5}
  }
];
var layout = {title: 'Jet'};
Plotly.newPlot('myDiv', data, layout);
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <div id="myDiv" style="width: 480px; height: 400px;"></div>

Answer 2

添加此答案以显示您可以在 Plotly colorbar

上进行的更多调整

 var plotData8kW = [{
           z: data8kW,
            hoverinfo:"z",
            colorbar:{
                //  len: 0.35, //Change size of bar
                title: 'Speed(RPM)<br\><br\>', //set title
                titleside:'top', //set postion
               //tickvals:[0,50,100],
                titlefont: {color: 'blue'} //title font color
              },
             type: 'heatmap',
             colorscale: enhancedScale,
             },
     ];

plotly js：热图中色标的位置和长度

plotly js: location and length of color scale in heatmap

javascript

plotly