Question

我正在使用chart.js作为一个Web项目，它工作得非常好。但是，我确实有一个问题。我正在尝试将带有n个数据点的折线图连接到n个html div的列表。当用户将鼠标悬停在数据点2上时，将突出显示div 2并调用一个函数。这确实有效。但是，当用户取消数据点2时，div 2应将其样式更改回默认样式。

我的问题是：如何在数据点上检测mouseout事件？

这就是我如何定义数据点悬停时会发生什么。

myChart = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
      title: {
      ...
      },
      tooltips: {
        enabled: true,
        custom: function(tooltip) {
          if (!tooltip) {
              return;
          }

          if(tooltip.dataPoints != null) {
            // here, the function that highlights the respective div is called, and it works fine
          }
        }
      }
    }
});

是否有这样的事情可以解开？我发现有一个全球事件 - ＆gt; mousout选项，但我不知道如何使用它，我也认为它引用了整个图表。

谢谢！

Answer 1

不确定这是否会对您有所帮助，但我在堆积条形图方面遇到了类似的问题。我想在条形图的顶部显示值，但我发现如果工具提示打开，则值会写在工具提示的顶部，使得两者都不可读。我决定只在工具提示没有显示的情况下显示值（如果工具提示是打开的，则不会呈现）。

原来我可以使用工具提示的不透明度设置来确定工具提示是否显示。这是非常简化的，但这是我提出的：

        options: {
            tooltips: {
                custom: function( tooltip ) {
                    if( tooltip.opacity > 0 ) {
                        console.log( "Tooltip is showing" );
                    } else {
                        console.log( "Tooltip is hidden" );
                    }
                    return;
                }
            }
        }

完成了这项工作之后，我就可以保存一个全局变量，我可以在别处测试，以查看工具提示是否显示。

Answer 2

geometry = Magick::Geometry.new(width, height, 0, 0, Magick::GreaterGeometry)
new_img = img.change_geometry(geometry) do |new_width, new_height|
  img.resize(new_width, new_height)
end
destroy_image(img)
new_img = yield(new_img) if block_given?
new_img

var ctx = document.getElementById("canvas").getContext("2d");

var data = {
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
  datasets: [{
    data: [300, 50, 100],
    backgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ],
    hoverBackgroundColor: [
      "#FF6384",
      "#36A2EB",
      "#FFCE56"
    ]
  }]
};

Chart.pluginService.register({
  beforeRender: function(chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function(sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));
        });
      });

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    }
  },
  afterDraw: function(chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      }

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      });
      chart.options.tooltips.enabled = false;
    }
  }
})

var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: {
    showAllTooltips: true
  }
});

如何在chart.js中检测Tooltip关闭的时间？

2 个答案: