Как я могу создать настраиваемые всплывающие подсказки для каждой точки данных на графике? - PullRequest
Новая
       99

Как я могу создать настраиваемые всплывающие подсказки для каждой точки данных на графике?

3 голосов
/ 03 августа 2020

У меня есть столбчатая диаграмма с накоплением, на которой я хочу показать долю проектов, для которых наш качественный аналитик должен завершить процесс тематического c кодирования. Однако посетители веб-страницы не обязательно будут знать контекст, им просто нужны некоторые детали во всплывающих подсказках. У меня две категории: (1) Всего проектов и (2) Закодированные проекты. В новой строке всплывающих подсказок Всего проектов в разделе «Остальные проекты: 170« Я хочу »Описание: Остальные проекты, которые еще не были качественно закодированы». Аналогично для «Закодированных проектов: 70» я хочу, чтобы отображалась новая строка «Описание: количество проектов, которые были качественно закодированы».

Последняя рабочая версия моей составной гистограммы находится здесь: https://codepen.io/tenebris_silentio/pen/ZEWzXyr

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Portfolio Review Overview</title>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
    </head>

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <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">



            <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

     <div class="container">
         <div class="row my-3">
                <div class="col">
                  <p class="sansserif"><br>
                </div>
            </div>

                <div class="col-md-6 py-1">
                    <div class="card" style="width: 36rem;">
                        <div class="card-body">
                            <canvas id="chBar"></canvas>
                        </div>
                    </div>
                </div>
            </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

    <script>

    // chart colors
    var colors = ['#007bff','#28a745','#333333','#c3e6cb','#dc3545','#6c757d'];

    /* bar chart */
    var ctx = document.getElementById('chBar');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Proportion of Coded Projects'],
    datasets: [
      {
        label: ['Coded Projects'],
        data: [70],
        info: [
        ['This refers to projects that have not been qualitatively coded using the TDF.'],
        backgroundColor: '#D6E9C6',
      }],
      {
        label: 'Remaining Projects',
        data: [170],
        backgroundColor: colors.slice(0,1),
        info: [
        ['This refers to total number of projects left to code.'],
      },
    ]
  },

  options: {
    tooltips: {
      callbacks: {
        title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
        label: (tooltipItems, data) => 'Count: ' + data.datasets[0].data[tooltipItems.index],
        footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[0].info[tooltipItems[0].index])
      }
    }
    scales: {
      xAxes: [{ stacked: true }],
      yAxes: [{ stacked: true }]
    }
  }
});


    </script>

1 Ответ

1 голос
/ 06 августа 2020

Ваш tooltips.callbacks должен выглядеть следующим образом: 

tooltips: {
  callbacks: {
    title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
    label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
    footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
  }
}

Пожалуйста, обратите внимание на ваш измененный код ниже: 

var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];

var ctx = document.getElementById('chBar');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Proportion of Coded Projects'],
    datasets: [{
        label: 'Coded Projects',
        data: [70],
        backgroundColor: '#D6E9C6',
        info: [
          ['This refers to projects that have not'],
          ['been qualitatively coded using the TDF.']
        ]
      },
      {
        label: 'Remaining Projects',
        data: [170],
        backgroundColor: colors.slice(0, 1),
        info: [
          ['This refers to total number'],
          ['of projects left to code.']
        ]
      }
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
        label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
        footer: (tooltipItems, data) => ['', 'Description:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
      }
    },
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chBar"></canvas>
...