在图表

时间:2016-10-19 21:46:42

标签: javascript d3.js c3.js

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

我知道这是c3js上的正常工具提示行为,但我希望工具提示保持其位置在右侧的最后一个值

您可以在this link

上看到示例
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
        }
    }

});

任何想法?

1 个答案:

答案 0 :(得分:3)

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

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的边距,但这会使你的图表缩小。