Plotly.js绘制大量柱状图时能否排除白色调配色？

我之前做可视化项目时刚好踩过这个坑！当你用Plotly.js绘制1000个柱子的柱状图时，默认调色板的颜色数量有限，循环到后期就会出现接近白色的色调，在白色背景下几乎完全没法识别，确实很头疼。给你几个实用的解决方案：

• 自定义高对比度调色板，彻底避开浅色
  你可以自己生成一组足够多的、色彩鲜明的颜色，完全跳过白色系。用HSL颜色模型来生成是个不错的选择，能精准控制饱和度和亮度，保证每个颜色都清晰可见：

  // 生成指定数量的高对比度颜色
  function generateCustomColors(count) {
    const colorList = [];
    for (let i = 0; i < count; i++) {
      // 色相循环分布，固定饱和度70%、亮度50%，确保颜色鲜明不暗淡
      const hue = (i * 360) / count;
      colorList.push(`hsl(${hue}, 70%, 50%)`);
    }
    return colorList;
  }
  
  // 绘图时应用自定义颜色
  Plotly.newPlot('chartContainer', [{
    x: Array.from({length: 1000}, (_, idx) => idx),
    y: Array.from({length: 1000}, () => Math.floor(Math.random() * 100)),
    type: 'bar',
    marker: {
      color: generateCustomColors(1000)
    }
  }]);
  

• 修改图表背景色，让浅色柱子显形
  如果不想折腾自定义色板，也可以直接把图表的背景改成深色，这样原本的浅色柱子就能立刻显现出来：

  Plotly.newPlot('chartContainer', [{
    x: Array.from({length: 1000}, (_, idx) => idx),
    y: Array.from({length: 1000}, () => Math.floor(Math.random() * 100)),
    type: 'bar'
  }], {
    paper_bgcolor: '#34495e', // 外层背景色
    plot_bgcolor: '#34495e'    // 绘图区域背景色
  });
  

• 使用Plotly内置的扩展色板
  Plotly自带了一些更丰富的调色板，比如Viridis、Plasma这类连续色板，它们的颜色范围更广，不会轻易出现白色，直接指定就能用：

  Plotly.newPlot('chartContainer', [{
    x: Array.from({length: 1000}, (_, idx) => idx),
    y: Array.from({length: 1000}, () => Math.floor(Math.random() * 100)),
    type: 'bar',
    marker: {
      color: Array.from({length: 1000}, (_, idx) => idx), // 用索引映射颜色
      colorscale: 'Viridis' // 调用内置高对比度色板
    }
  }]);
  

核心问题其实是默认调色板的颜色池容量有限，且包含低对比度的浅色，上面的几种方法都能从不同角度解决这个问题，你可以根据自己的需求选最合适的~

内容的提问来源于stack exchange，提问作者Aw KingOftheworld