Javascript 设计样式字体和字体颜色

Question

<head>
    <script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>

<body>
    <div id='myDiv'></div>
  
  <script>
    var data = [{
      type: "sunburst",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
      values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
      leaf: {opacity: 0.4},
      marker: {line: {width: 2}},
    }];

    var layout = {
      margin: {l: 0, r: 0, b: 0, t: 0},
      width: 500,
      height: 500,
      font: {
          color: 'red',
          family:'Times New Roman'
      },
      paper_bgcolor:'rgba(0,0,0,0)',
      plot_bgcolor:'rgba(0,0,0,0)'
    }

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

我正在尝试使用 Plotly 2.8.3 设计我的旭日图样式。和 Javascript。我想将每个部分的颜色和字体系列更改为红色和 Times New Roman。

字体系列似乎变了，但字体颜色似乎保持不变，只有中间部分变了？有解决办法吗？

Answer 1

您可以使用 sunburst Trace 的 insidetextfont 属性 :

insidetextfont: {
    color: "red",
}

<head>
    <script src='https://cdn.plot.ly/plotly-2.8.3.min.js'></script>
</head>

<body>
    <div id='myDiv'></div>
  
  <script>
    var data = [{
      type: "sunburst",
      labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
      parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
      values:  [10, 14, 12, 10, 2, 6, 6, 4, 4],
      leaf: {opacity: 0.4},
      marker: {line: {width: 2}},
      insidetextfont: {
        color: "red",
      }
    }];

    var layout = {
      margin: {l: 0, r: 0, b: 0, t: 0},
      width: 500,
      height: 500,
      font: {
          color: 'red',
          family:'Times New Roman'
      },
      paper_bgcolor:'rgba(0,0,0,0)',
      plot_bgcolor:'rgba(0,0,0,0)'
    }

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>

Javascript 设计样式字体和字体颜色

Javascript Plotly styling font and font colour

javascript

plotly.js