Как настроить или показать весь текст всплывающей подсказки по умолчанию без наведения - PullRequest
0 голосов
/ 20 апреля 2020

enter image description here Я работаю над одним проектом, в котором я использую Графики. js для отображения графиков. Здесь я хочу показать все значения бара по умолчанию в верхней части каждого бара (Использование чата на панели ), когда мы наводим указатель мыши на эту полосу, она показывает значение, но есть ли какая-либо возможность показать эту всплывающую подсказку по умолчанию без наведения на нее

Ниже приведен пример скрипта. Здесь, в этой скрипке, я хочу показать 60, 30,40 по умолчанию на линейчатой ​​диаграмме по умолчанию без наведения на нее.

Здесь на скриншоте выше я попытался поместить все всплывающие подсказки как по умолчанию, но так как используются 3 графика, он показывает подсказку для всех графики, но я хочу поместить всплывающую подсказку только на гистограмму, я знаю, что это немного сложно, но будет какой-то способ, с помощью которого я смогу решить мою проблему. Пожалуйста, ведите меня, вот мой код, снятый с JS

getchart();
function getchart() {
$("#barChart").remove();
    const decimals = 3;
    $(".chart").append("<canvas id='barChart' width='692' height='346'></canvas>");
    var ctx = document.getElementById("barChart");

    Chart.pluginService.register({
      beforeRender: function(chart) {
        if (chart.config.options.showAllTooltips) {
          chart.pluginTooltips = [];
          chart.config.data.datasets.forEach(function(dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function(sector, j) {
                console.log(chart);
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart, 
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                  }, chart));
            });
          });
      }
        chart.options.tooltips.enabled = false;   
      },

      afterDraw: function(chart, easing) {

        if (chart.config.options.showAllTooltips) {
          if (!chart.allTooltipsOnce) {
            if (easing !== 1)
              return;
            chart.allTooltipsOnce = true;
          }

          chart.options.tooltips.enabled = true;
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });
          chart.options.tooltips.enabled = false;
        }
      }
    })

    var barChart;
       barChart = new Chart(ctx, {
       type: 'bar',
      data: {
        labels: ['30', '45', '60', '90', '120', '120+'],
        datasets: [{
          type: 'bar',
          label: 'Receivable',
          data: [730, 492.5, 120, 4732.5, 2760.85, 0],
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }, {
          type: 'line',
          label: 'Past Due',
          data: [1500, 1500, 1500, 1500, 1500, 1500],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255,99,132,1)',
          borderWidth: 1
        }, {
          type: 'line',
          label: 'Invoice',
          data: [1000, 1000, 1000, 1000, 1000, 1000],
          backgroundColor: 'rgba(75, 00, 150, 0.2)',
          borderColor: 'rgba(75, 00, 150,1)',
          borderWidth: 2
        }]
      },
      options: {
        scales: {
          xAxes: [{
            display: true,
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: 'Days'
            },
          }],
          yAxes: [{
            display: true,
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: 'Dollar Amount'
            },
            ticks: {
              beginAtZero: true,
            }
          }, {
            id: 'invoice-amount',
            display: false,
            stacked: false,
            scaleLabel: {
              display: false,
              labelString: 'Dollar Amount'
            },
            ticks: {
              beginAtZero: true,
            }
          }]
        },
        showAllTooltips: true,
      }
    });       
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...