Question

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

{
    "page": 1,
    "results": [{
        "poster_path": "\/il9XWx5CbNd2KdDUwrcClEZiLkv.jpg",
        "adult": false,
        "overview": "Last months of World War II in April 1945. As the Allies make their final push in the European Theater,
        a battle - hardened U.S.Army sergeant in the 2 nd Armored Division named Wardaddy commands a Sherman tank called Fury and its five - man crew on a deadly mission behind enemy lines.Outnumbered and outgunned,
        Wardaddy and his men face overwhelming odds in their heroic attempts to strike at the heart of Nazi Germany.
        ",
        "release_date": "2014-10-15",
        "genre_ids": [10752,
            18,
            28
        ],
        "id": 228150,
        "original_title": "Fury",
        "original_language": "en",
        "title": "Fury",
        "backdrop_path": "\/pKawqrtCBMmxarft7o1LbEynys7.jpg",
        "popularity": 11.717304,
        "vote_count": 2435,
        "video": false,
        "vote_average": 7.43

// more entries with the same name/value pairs... same error for next entry
// when I get to the "overview" name.

    }],
    "total_results": 70,
    "total_pages": 4
}

我很难看到api是否允许修改色标位置和长度。 plotly.js是否允许操纵这些属性，你是否有一个关于热图和/或三维图形的例子？

Answer 1

您可以通过在colorbar添加以下行来设置data的{{3}}和position：

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

下面是一个片段，其左侧是彩色条，一半是常规尺寸。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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：热图中色标的位置和长度

2 个答案: