Установка положения всплывающей подсказки для последнего значения на графике

#javascript #d3.js #c3.js

#javascript #d3.js #c3.js

Вопрос:

Есть какой-то способ установить положение всплывающей подсказки в 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
        }
    }

});
  

есть идеи?

Ответ №1:

Вы можете установить положение всплывающей подсказки с помощью этого кода:

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'))}
  }
}
  

Однако, как это работает, когда всплывающая подсказка выходит за пределы графика, я не знаю, возможно, это просто обрезание. Я полагаю, вы могли бы добавить поле в 100 пикселей справа, если это необходимо, но это сделает вашу диаграмму меньше.