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

Javascript ChartJS-一个元素的工具提示是用户应该能够选择的覆盖点,javascript,html,reactjs,charts,chart.js,Javascript,Html,Reactjs,Charts,Chart.js,我有ChordJS库生成的chord。几乎所有的东西都很好,但是由于工具提示的位置,对于一些特定的数据我有问题。我试图用不同的选项来改变这一点,但我无法处理——在我的和弦上有两个独立的视图。其中一个具有列,因此列中的每个点都会触发工具提示。第二种是带有一些点的条形字符,只有当鼠标位于这些点时才会显示工具提示 在这里你们可以看到柱的工具提示——它是一个带有选择点的覆盖条 以下是条形图的要点: 我想我必须用options参数来处理这个问题,所以这里我当时的“工具提示”被更改了很多次 char

我有ChordJS库生成的chord。几乎所有的东西都很好,但是由于工具提示的位置,对于一些特定的数据我有问题。我试图用不同的选项来改变这一点,但我无法处理——在我的和弦上有两个独立的视图。其中一个具有列,因此列中的每个点都会触发工具提示。第二种是带有一些点的条形字符,只有当鼠标位于这些点时才会显示工具提示

在这里你们可以看到柱的工具提示——它是一个带有选择点的覆盖条

以下是条形图的要点:

我想我必须用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,
    }
};

我想要实现什么?也许工具提示的镜像位置会有所帮助,但我在这方面有问题。或者有人有其他想法?

所以,我想我已经解决了你的问题!工具提示参数应该在选项参数中

像这样:

options:{
  tooltips: {
      custom:function(tooltipModel)
      {
        tooltipModel.yAlign="bottom";
        tooltipModel.y=tooltipModel.y-30;
      },
      intersect:true
    }
}
我建议您不要让工具提示跟随鼠标,它可以很容易地阻止更多元素,而不是使它们可见

我准备了一个处理随机数据的工具,并使用自定义函数强制工具提示始终位于顶部。您还可以使用console.logtooltipModel和所需样式的参数

希望这对你有帮助


你打算做什么?使工具提示位于点上方?你读过这个吗?是的,我试过,也许我做错了什么。在任何情况下,我都想让totip覆盖列/点,或者鼠标光标后面的工具提示是件好事?