javascript - plotly js : location and length of color scale in heatmap

Question

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

这是一个 example in codepen 。

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 是否允许修改色标位置和长度。 plotly.js 是否允许操作这些属性，您是否有热图和/或 3D 图表的示例？

Answer 1

您可以设置 position和 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>