是否可以在 plotly.js 中有一个水平颜色条

织梦狗教程前端问题

2022-01-01

Is it possible to have a horizontal color bar in plotly.js(是否可以在 plotly.js 中有一个水平颜色条)

本文介绍了是否可以在 plotly.js 中有一个水平颜色条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 plotly.js 中的等值线图表.有没有办法让颜色条比例在图表底部水平显示，而不是在右侧或左侧垂直显示?

I am working with choropleth charts in plotly.js. Is there a way to get the colorbar scale to display horizontally at the bottom of the chart instead of vertically along the right or left sides?

作为参考，请查看 Plotly 网站上给出的第一个示例 https://plot.ly/javascript/choropleth-maps/#world-choropleth-map-robinson-projection

For reference, check out the first example given at the Plotly site https://plot.ly/javascript/choropleth-maps/#world-choropleth-map-robinson-projection

谢谢！

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

    var data = [{
        type: 'choropleth',
        locationmode: 'country names',
        locations: unpack(rows, 'location'),
        z: unpack(rows, 'alcohol'), 
        text: unpack(rows, 'location'),
         autocolorscale: true
    }];

    var layout = {
      title: 'Pure alcohol consumption among adults (age 15+) in 2010',
      geo: {
          projection: {
              type: 'robinson'
          }
      }
    };
    Plotly.plot(myDiv, data, layout, {showLink: false});
});