首页 > 解决方案 > Chartjs - 当用户点击图表中的数据点时保持工具提示打开

问题描述

我一直在用下面的JSFiddle查看这个线程,这正是我需要的。似乎答案已经过时,但我无法让它工作。

我正在尝试创建的插件将允许用户单击图表上的数据点,并且工具提示将保持打开状态。然后单击另一个数据点,该工具提示也将保持打开状态。这将允许用户更轻松地比较两个不同工具提示中的数据。如果允许同时出现多个工具提示,“click”事件将很有用。任何想法或指向正确方向的指针都会非常感激!

以下是来自另一个线程的插件(Marine Giraud 的信任)

var keepTooltipOpenPlugin = {

      beforeRender: function(chart) {
  
    // We are looking for bubble which owns "keepTooltipOpen" parameter.
        var datasets = chart.data.datasets;
        chart.pluginTooltips = [];
        for (i = 0; i < datasets.length; i++) {
          for (j = 0; j < datasets[i].data.length; j++) {
            if (datasets[i].data[j].keepTooltipOpen && !chart.getDatasetMeta(i).hidden) {
            //When we find one, we are pushing all informations to create the tooltip.
              chart.pluginTooltips.push(new Chart.Tooltip({
                _chart: chart.chart,
                _chartInstance: chart,
                _data: chart.data,
                _options: chart.options.tooltips,
                _active: [chart.getDatasetMeta(i).data[j]]
              }, chart));
            }
          }
        }
      }, // end beforeRender
  
      afterDatasetsDraw: function(chart, easing) {

          // Draw tooltips
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });


        } // end afterDatasetsDraw
    }

标签: javascriptchart.js

解决方案


推荐阅读