Plotly JavaScript Heatmap - наведите указатель мыши на имена полей X и Y (не данные) на диаграмме - чтобы пользователи видели определения категорийных данных - PullRequest
Новая
       108

Plotly JavaScript Heatmap - наведите указатель мыши на имена полей X и Y (не данные) на диаграмме - чтобы пользователи видели определения категорийных данных

0 голосов
/ 04 августа 2020
• 1000 мы предоставляем текстовое определение наведения / подсказки для каждого из них, когда кто-то наводит курсор на имя поля. Например, когда кто-то наводит курсор на «Географический» на именах полей оси x, он может сказать что-то вроде «Определение: проект, на котором сфокусирован расстояния, местоположения или близости ". Я представил картинку, чтобы лучше понять, что я имею в виду под именами полей оси x.

Bottom Line : Я хочу знать, как предоставить настраиваемый текст, когда кто-то наводит курсор на имя поля оси x, чтобы я мог определить каждое имя поля. Я не смог найти для этого документацию.

РЕДАКТИРОВАТЬ: Я понимаю, что это просто может невозможно с Plotly . Я ценю любые другие идеи, позволяющие пользователям легко просматривать определения для доменов. T мотки! 

<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

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

<script>


var data = [
  {

    z: [[8, 8, 7, 5, 7], [10, 5, 2, 11, 4], [6, 1, 2, 3, 1]],
    x: ['Geographical', 'Temporal', 'Cultural', 'Digital', 'Financial'],
    y: ['Observational', 'Program Evaluation', 'Intervention'],
    type: 'heatmap',

    hovertemplate: '<b># of %{y} Projects with a %{x} classification</b>: %{z}' + '<extra></extra>',

    hoverongaps: true
  }
];

var layout = {
  title: 'Domains by Project Type',
  width: 900,
  height: 625,
  autosize: false,
    yaxis: {automargin: true}
};

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

введите описание изображения здесь

...