隐藏扩展到饼图之外的 piechartjs 的文本信息 - plotly js

Question

我正在使用 Plotly 来显示饼图。我的代码如下所示：

let dataKeyValue = {
    'ADA': 660,
    'Affordable': 49,
    'Balcony': 2546,
    'Bathroom': 157,
    'Ceiling': 337,
    'Closet/Storage': 23,
    'Corner': 577,
    'DOM': 321,
    'Finishes': 1455,
    'Floor Level': 6205,
    'Floor Plan or Layout': 569,
    'Flooring': 242,
    'Kitchen': 4543,
    'Location': 3462,
    'Loft': 12,
    'Renovation': 1438,
    'Rent': 658,
    'Square Feet': 2114,
    'Unclear': 1692,
    'Unit Features': 2544,
    'View/Exposure': 4703,
    'Washer/Dryer': 2037,
    'Windows': 340,
    'private entry': 8
};
let dollarSign = "$";
let pieData = [{
  values:  Object.values(dataKeyValue),
  labels: Object.keys(dataKeyValue),
  type: 'pie',
  textinfo: "label",
  hoverinfo: "label+percent",
  // texttemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}",
  hovertemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}"
        }];

var layout = {
  margin: {"t": 0, "b": 0, "l": 0, "r": 0},
  showlegend: false,
};

Plotly.newPlot('myDiv', pieData, layout);

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

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

饼图工作正常，但每个切片的标签显示在饼图之外。我试图摆脱那些不在饼图中的标签。

要删除标签，我发现选项为 textinfo: "none"，但这是完全删除标签，这意味着它也删除了饼图中的标签。但是，我只想隐藏饼图之外的那些。

我想隐藏右上角显示的部分。这是一个jsfiddle.

Answer 1

一个解决方案是将 outside text color 设置为 transparent:

let pieData = [{
  //...
  outsidetextfont: { color: 'transparent' },
}]

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

let dataKeyValue = {
    'ADA': 660,
    'Affordable': 49,
    'Balcony': 2546,
    'Bathroom': 157,
    'Ceiling': 337,
    'Closet/Storage': 23,
    'Corner': 577,
    'DOM': 321,
    'Finishes': 1455,
    'Floor Level': 6205,
    'Floor Plan or Layout': 569,
    'Flooring': 242,
    'Kitchen': 4543,
    'Location': 3462,
    'Loft': 12,
    'Renovation': 1438,
    'Rent': 658,
    'Square Feet': 2114,
    'Unclear': 1692,
    'Unit Features': 2544,
    'View/Exposure': 4703,
    'Washer/Dryer': 2037,
    'Windows': 340,
    'private entry': 8
};
let dollarSign = "$";
let pieData = [{
  values:  Object.values(dataKeyValue),
  labels: Object.keys(dataKeyValue),
  type: 'pie',
  textinfo: "label",
  outsidetextfont: { color: 'transparent' }, // 
  hoverinfo: "label+percent",
  // texttemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}",
  hovertemplate: "%{label}<br>"+dollarSign+"%{value}<br>%{percent}"
        }];

var layout = {
  margin: {"t": 0, "b": 0, "l": 0, "r": 0},
  showlegend: false,
};

Plotly.newPlot('myDiv', pieData, layout);

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

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

隐藏扩展到饼图之外的 piechartjs 的文本信息 - plotly js

Hide textinfo of piechartjs which are extended outside the piechart - plotly js

javascript

plotly.js