Диаграмма js показывает скрытые данные в подсказке - PullRequest
Новая
       9

Диаграмма js показывает скрытые данные в подсказке

0 голосов
/ 25 апреля 2020

Good Day,

У меня есть гистограмма с несколькими наборами данных для диаграммы. Я хотел бы скрыть все столбцы, кроме одного (итоги, если хотите), и во всплывающей подсказке я хочу показать все данные во всех наборах данных. К сожалению, подсказка показывает только видимые наборы данных. Кто-нибудь знает, как показать все наборы данных?

Если вы запустите это с 

<canvas id="myChart" width="400" height="400"></canvas>

Наведите указатель мыши на диаграмму, и первый набор данных (помеченный как «Первая метка») не будет показан. Как мне показать это во всплывающей подсказке? Кто-нибудь знает? 

var ds1 = [], ds2 = [], ds3 = [], ds4 = [], ds5 = [], ds6 = [], labels = [];

for(var i = 0; i < 2; i++){
    labels.push('Label: ' + i);
  ds1.push(i);
  ds2.push(i+1);
  ds3.push(i+2);
  ds4.push(i+3);
  ds5.push(i+4);
  ds6.push(i+5);
}
const dataSets = {
labels: labels,
datasets: [
                {
            label: 'First Label',
          hidden: true,
          data: ds1
        },{
          label: 'Second Label',
          data: ds2
        },{
          label: 'Third Label',
          data: ds3
        },{
          label: 'Fourth Label',
          data: ds4        
        },{
          label: 'Fifth Label',
          data: ds5        
        },{
          label: 'Totals',
          data: ds6
        }
    ]
}
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: dataSets,
                    elements: {
                        rectangle: {
                            borderWidth: 2
                        }
                    },
                    responsive: true,
                    legend: {
                        display: false
                    },
                    title: {
                        display: false
                    },
                    scales: {
                        yAxes: [
                            {
                                barThickness: 15
                            }
                        ],
                        xAxes: [
                            {
                                ticks: {
                                    suggestedMin: 0,
                                    suggestedMax: 50
                                },
                                minBarLength: 5
                            }]
          }
});

Спасибо, Тим

1 Ответ

0 голосов
/ 25 апреля 2020

Если вы скрываете все бары, кроме одного, вы можете определить функцию tooltips.callback для label. Эта функция собирает метки и соответствующие значения из всех наборов данных, используя Array.map() и возвращает string array. 

tooltips: {
  callbacks: {
    label: (tooltipItem, chart) => dataSets.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
  }
},

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

var ds1 = [], ds2 = [], ds3 = [], ds4 = [], ds5 = [], ds6 = [], labels = [];

for (var i = 0; i < 2; i++) {
  labels.push('Label: ' + i);
  ds1.push(i);
  ds2.push(i + 1);
  ds3.push(i + 2);
  ds4.push(i + 3);
  ds5.push(i + 4);
  ds6.push(5 * i + 10);
};

const dataSets = {
  labels: labels,
  datasets: [{
    label: 'First Label',
    hidden: true,
    data: ds1
  }, {
    label: 'Second Label',
    hidden: true,
    data: ds2
  }, {
    label: 'Third Label',
    hidden: true,
    data: ds3
  }, {
    label: 'Fourth Label',
    hidden: true,
    data: ds4
  }, {
    label: 'Fifth Label',
    hidden: true,
    data: ds5
  }, {
    label: 'Totals',
    data: ds6
  }]
};

var myChart = new Chart('myChart', {
  type: 'horizontalBar',
  responsive: true,
  data: dataSets,
  elements: {
    rectangle: {
      borderWidth: 2
    }
  },
  options: {
    legend: {
      display: false
    },
    title: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, chart) => dataSets.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
          stepSize: 1
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Если вы хотите отобразить легенду и позволить пользователям показывать дополнительные полосы с помощью щелчка мышью на отдельных ярлыках легенды, функция обратного вызова будет вызываться один раз для каждого видимая полоса Следовательно, вам необходимо убедиться, что вы возвращаете массив меток только один раз и возвращаете null во всех других случаях. Следующий код вернет массив меток только для панели «Итоги». 

tooltips: {
  callbacks: {
    label: (tooltipItem, chart) => {
      if (tooltipItem.datasetIndex == dataSets.datasets.length - 1) {
        return dataSets.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index]);
      }
      return null;
    }
  }
},

Однако это не будет работать, если пользователь решит скрыть панель «Итоги». Однако код можно улучшить, чтобы преодолеть это ограничение.

...