Angular 在 Plotly js 中设置自定义调色板

Question

我在最近的 angular 项目中使用 Plotly js。我通过使用基于 angular 的包装器成功实现了该库。

有一件事我尝试通过多种方式实现但都失败了。我正在尝试为其图表使用我的自定义调色板。

我通过在图表数据布局中传递颜色找到了解决方法，例如，

data = [{
  values: allValues[0],
  labels: allLabels,
  type: 'pie',
  name: 'Starry Night',
  marker: {
    colors: [['rgb(56, 75, 126)', 'rgb(18, 36, 37)', 'rgb(34, 53, 101)', 'rgb(36, 55, 57)', 'rgb(6, 4, 4)']]
  },
  domain: {
    row: 0,
    column: 0
  },
  hoverinfo: 'label+percent+name',
  textinfo: 'none'
}

它奏效了，但它不是完美的方法，因为我需要在每个图表数据中添加它，并且需要处理那里有多少数据点，所以我推送了那么多颜色代码。

有什么方法可以在配置之类的地方提供我的调色板，这样每次图表初始化时，它就会开始从自定义调色板中获取颜色。

Answer 1

布局属性采用属性 colorway，它采用颜色列表 names/codes。

public graph: any = {
    data: [],
    layout: {
      colorway: ["red", "green", "blue", "goldenrod", "magenta"],
      autosize: true,
    }
}

但我还没有弄清楚如何全局设置它。

Angular 在 Plotly js 中设置自定义调色板

Set custom colour palette in Plotly js in Angular

javascript

plotly

angular

plotly.js