在图形上的最后一个值上设置工具提示位置

Set tooltip position on the last value on the graph

本文关键字：设置 工具提示 位置 最后一个 图形      更新时间：2023-09-26

在c3js中有一些方法可以设置工具提示的位置，因为工具提示总是在垂直线的右侧，但是当光标在最后一个值上时，它会向左侧改变位置或在图形中不离开它的状态。

我知道这是c3js上正常的工具提示行为，但我希望工具提示保持在最后一个值

的右侧

你可以在这个链接上看到这个例子

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    }
});

任何想法?

您可以使用下面的代码设置工具提示的位置:

http://c3js.org/reference.html tooltip-position 

tooltip: {
    position: function (data, width, height, element) {
      var top = d3.mouse(element)[1] + 15;
      return {top: top, left: parseInt(element.getAttribute('x')) + parseInt(element.getAttribute('width'))}
  }
}

然而，当工具提示伸出图表的一侧时，它是如何工作的，我不知道，它可能只是被切断了。如果需要的话，你可以在右边添加100px的边距，但这会使你的图表变小。

相关文章：