Plotly JavaScript - Donut Chart - Hoverinfo, пытается добавить пользовательские определения с помощью массива - Небольшая проблема с моим кодом - PullRequest
Новая
       31

Plotly JavaScript - Donut Chart - Hoverinfo, пытается добавить пользовательские определения с помощью массива - Небольшая проблема с моим кодом

0 голосов
/ 05 августа 2020

У меня есть кольцевая диаграмма Plotly. JS, которую я хочу, чтобы пользователи могли наводить указатель мыши на данные и видеть определение каждого типа здравоохранения в дополнение к метке и данным. Например, когда они наводят курсор на Specialty Care, я бы хотел, чтобы это выглядело так:

Speciality Care
42,9%
Speciality Care Definition

Я думал, что могу добавить массив определений (см. "Des c:") и добавить его 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>

1 Ответ

0 голосов
/ 10 августа 2020

Боже, разве ты не ненавидишь, когда ответ так близок, что может ударить тебя по лицу? Все, что мне нужно было сделать, это добавить текстовый массив и сослаться на него. Мне просто нужно было поправить раздел в var data. В частности, я добавил раздел «text:» и «textinfo» (чтобы убрать недавно добавленные определения из-под пончика). Затем я просто добавил текстовую ссылку на 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'
    }];
...