Plotly JavaScript - 圆环图 - Hoverinfo，尝试使用数组添加自定义定义 - 我的代码存在小问题

Question

我有一个 Plotly.JS 圆环图，我希望用户能够将鼠标悬停在数据上并查看每种医疗保健类型的定义以及标签和数据。例如，当他们将鼠标悬停在 Specialty Care 上时，我希望它看起来像这样：

专业护理
42.9%
专业护理定义

我想我可以添加一组定义（参见“desc:”）并将其添加到 hoverinfo，但要么你不能，要么我做错了。我的问题是我如何让它工作才能让它看起来像上面的粗体？

这是我的代码笔：https://codepen.io/tenebris_silentio/pen/OJNJxGX

   <!DOCTYPE html>
   <html lang="en">
   <div id='myDiv'>
<script>

  var ultimateColors = [
    ['rgb(0, 25, 51)', 'rgb(0, 76, 153)', 'rgb(51, 153, 255)', 'rgb(153, 204, 255)', 'rgb(51, 51, 255)', 'rgb(204, 255, 255)']
  ];

  var data = [{
    values: [4, 21, 8, 1, 1, 14],
    labels: ['Primary Care', 'Specialty Care', 'Mental Health', 'Inpatient/Acute Care', 'Long-term Care', 'General Care/Not Specified'],
    desc: ['Primary Care Definition', 'Specialty Care Definition', 'Mental Health Definition', 'Inpatient/Acute Care Definition', 'Long-term Care Definition', 'General Care/Not Specified Definition'],
    domain: {column: 0},
    name: 'Sources',
    marker: {
      colors: ultimateColors[0]
    },
    hoverinfo: 'label+percent+desc',

    hole: .4,
    type: 'pie'
  }];

  var layout = {
    title: 'Access Projects by Care Type' + '<br>' + 'N = 49',
    annotations: [
      {
        font: {
          size: 17
        },
        showarrow: false,
        text: '',
        x: 0.5,
        y: 0.5
      },


    ],
    height: 650,
    width: 800,
    showlegend: true,
    grid: {rows: 1, columns: 1}
  };

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

Answer 1

哎呀，当答案如此接近以至于可能打到你的脸时，你不讨厌吗？我需要做的就是添加一个文本数组并引用它。我只需要修复 var 数据中的部分。特别是，我添加了“文本：”部分和“文本信息”（以从出现在甜甜圈内的新添加的定义中取出）。然后我只是添加了对 hoverinfo 的文本引用。就是这样！

var data = [{
    values: [4, 21, 8, 1, 1, 14],
    labels: ['Primary Care', 'Specialty Care', 'Mental Health', 'Inpatient/Acute Care', 
    'Long-term Care', 'General Care/Not Specified'],
    desc: ['Primary Care Definition', 'Specialty Care Definition', 'Mental Health 
    Definition', 'Inpatient/Acute Care Definition', 'Long-term Care Definition', 'General 
    Care/Not Specified Definition'],
    text: ['The project is focused on primary care.', 'The project is focused on specialty 
    care.', 'The project is focused on mental health', 'The project is focused on 
    inpatient/acute care', 'The project is focused on long-term care', 'The type of care 
    is not indicated or is not specific to one type'],
    textinfo: 'none',
    domain: {column: 0},
    name: 'Sources',
    marker: {
      colors: ultimateColors[0]
    },
    hoverinfo: 'label+percent+desc+text',

    hole: .4,
    type: 'pie'
    }];

Plotly JavaScript - 圆环图 - Hoverinfo，尝试使用数组添加自定义定义 - 我的代码存在小问题

Plotly JavaScript - Donut Chart - Hoverinfo, trying to add in custom definitions using array - Small issue with my code

html

javascript

donut-chart

plotly

plotly.js