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

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

1 个答案: