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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

I am using Plotly to show a pie chart. My code looks like:

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>

question from:https://stackoverflow.com/questions/65830651/hide-textinfo-of-piechartjs-which-are-extended-outside-the-piechart-plotly-js

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:36:47+0000

One solution is to set the outside text color to 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>

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags