插入符插入ChartJS的自定义工具提示

时间:2019-03-05 06:24:05

标签: graph charts chart.js tooltip caret

我正在尝试使用ChartJs创建自定义工具提示。到目前为止,我已经设法控制了标题和标签的CSS,但我无法在工具提示中获得“插入符号”。

当前: Custom Tooltip without caret

预期: Custom Tooltip with caret

我也尝试过ChartJs文档教程,研究了多个代码笔。

请参阅:https://stackblitz.com/edit/chart-js-html-tooltip 这是按照教程进行的操作,但是在此符号上仍然没有插入符号。

我尝试在chartjs配置中修改这两个:

// Set caret Position

  tooltipEl.classList.remove('above', 'below', 'no-transform');
  if (tooltip.yAlign) {
    tooltipEl.classList.add(tooltip.yAlign);
  } else {
    tooltipEl.classList.add('no-transform');
  }

 const positionY = this._chart.canvas.offsetTop;
  const positionX = this._chart.canvas.offsetLeft;

  // Display, position, and set styles for font for tooltip element
  tooltipEl.style.opacity = 1 as any;
  tooltipEl.style.left = positionX + tooltip.caretX + 'px';
  tooltipEl.style.top = positionY + tooltip.caretY + 'px';
  tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';

您可以编辑此https://stackblitz.com/edit/chart-js-html-tooltip来回答

0 个答案:

没有答案