ChartJS - 一个元素的工具提示是用户应该能够选择的覆盖点

Question

我有ChordJS库生成的和弦。几乎所有东西都很棒，但有一些特定的数据，我有工具提示位置的问题。我尝试用不同的选项改变它，但我无法处理 - 我的和弦有两个不同的视图。一个有列，所以列内的每个点都是触发工具提示。第二个是条形码，有一些点可供选择，只有当鼠标位于这些点时才会显示工具提示。

在这里你可以看到列的工具提示 - 它的覆盖条带有点选择。

这是条形图的要点：

我想我必须使用options参数来处理它，所以这里我所拥有的那一刻（'工具提示'被改变了很多次）

    chartOptions = {
    // Set colors on bars when clicked
    onClick: function (e, activeElements) {
        if (activeElements[0]) {
            let barNumber = this.data.datasets[0].backgroundColor.length
            var elementIdx = activeElements[0]._index;
            let colors = self.fillColorArray(mintColor, yellowColor, yellowColor, elementIdx, barNumber);
            this.data.datasets[0].backgroundColor = colors;
            self.props.selectCharBar(elementIdx);
        }
    },
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
        xAxes: [{
            id: 'xAxisA',
            gridLines: {
                offsetGridLines: true
            }
        }],
        yAxes: [{
            id: 'yAxisA',
            type: 'linear',
            position: 'left',
            ticks: {
                min: 0,
                callback: function (value, index, values) {
                    return value.toLocaleString();
                }
            }
        }]
    },
    legend: {
        labels: {
            //Workaround for legend color change when first bar selected by user:
            generateLabels: function (chart) {
                let labels = ChartJs.defaults.global.legend.labels.generateLabels(chart);
                if (labels[0]) labels[0].fillStyle = mintColor;
                return labels;
            }
        }
    },
    tooltips: {
        position: 'average',
        intersect: true,
    }
};

我想要实现什么？可能工具提示的位置反映它的反射可能有所帮助，但我有问题这样做。或者也许有人有其他想法？

Answer 1

所以，我想我已经找到了你的问题！您的工具提示参数应该在options参数中！

像这样：

options:{
  tooltips: {
      custom:function(tooltipModel)
      {
        tooltipModel.yAlign="bottom";
        tooltipModel.y=tooltipModel.y-30;
      },
      intersect:true
    }
}

我建议您不要让工具提示跟随鼠标，它可以轻松阻止更多元素，而不是让它们可见。

我已经准备了一个随机数据的小提琴，并且通过自定义功能，我已经迫使工具提示始终位于顶部。您还可以使用console.log(tooltipModel)并弄清楚预期样式的参数。

希望这对你有所帮助。

JSFiddle