У меня есть кольцевая диаграмма 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>