Plotly 极轴和图例文本前景色

Question

如何在背景为黑色时将图例和极轴（0、45、90 等）前景色更改为白色。

var data = [
    {
      type: "scatterpolar",
      mode: "lines+markers",
      r: [.302, .098],
      theta: [13,106],
      line: {
        color: "#ff66ab"
      },
      marker: {
        color: "#8090c7",
        symbol: "square",
        size: 8
      }    
    },
  {
    type: "scatterpolar",
    mode: "lines+markers",
    r: [.39, .102],
    theta: [159, 168],
    line: {
      color: 'black'
    },
    marker: {
        color: "red",
        symbol: "circle",
        size: 8
      }    
  }
  ]

var layout = {
    showlegend: true,
    polar: {
     
      radialaxis: {
        tickfont: {
          size: 8
        }
      },
      angularaxis: {
        tickfont: {
          size: 8
        },
        rotation: 90,
        direction: "clockwise"
      }
    },
    plot_bgcolor: 'black',
    paper_bgcolor: 'black'
  }

Plotly.newPlot('myDiv', data, layout)

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Answer 1

您可以设置layout.legend.font.color = 'white'和layout.polar.angularaxis.color = 'white'。

var data = [
    {
      type: "scatterpolar",
      mode: "lines+markers",
      r: [.302, .098],
      theta: [13,106],
      line: {
        color: "#ff66ab"
      },
      marker: {
        color: "#8090c7",
        symbol: "square",
        size: 8
      }    
    },
  {
    type: "scatterpolar",
    mode: "lines+markers",
    r: [.39, .102],
    theta: [159, 168],
    line: {
      color: 'black'
    },
    marker: {
        color: "red",
        symbol: "circle",
        size: 8
      }    
  }
  ]

var layout = {
    showlegend: true,
    legend: {
      font: {
        color: 'white'
      }
    },
    polar: {
     
      radialaxis: {
        tickfont: {
          size: 8
        }
      },
      angularaxis: {
        color: 'white',
        tickfont: {
          size: 8
        },
        rotation: 90,
        direction: "clockwise"
      }
    },
    plot_bgcolor: 'black',
    paper_bgcolor: 'black'
  }

Plotly.newPlot('myDiv', data, layout)

<head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.9.0.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Plotly 极轴和图例文本前景色

Plotly Polar Axis and Legend Text Foreground Color

javascript

plotly

plotly.js