ChartJS - всплывающая подсказка одного элемента охватывает точку, которую пользователь должен иметь возможность выбрать - PullRequest
Новая
       13

ChartJS - всплывающая подсказка одного элемента охватывает точку, которую пользователь должен иметь возможность выбрать

0 голосов
/ 28 февраля 2019

У меня есть аккорд, сгенерированный библиотекой ChordJS.Почти все отлично, но с некоторыми конкретными данными у меня проблема из-за позиции подсказки.Я пытался изменить это с помощью различных опций, но я не мог справиться с этим - у меня есть два отдельных взгляда на мой аккорд.Один со столбцами, поэтому каждая точка внутри столбца вызывает всплывающую подсказку.Второй - гистограмма с некоторыми точками для выбора, и только когда мышь находится в этих точках, отображается подсказка.

Здесь Вы можете увидеть всплывающую подсказку для столбца - это покрывающая панель с точкой для выбора.

enter image description here

Вот точка на диаграмме:

enter image description here

Я думаю, что должен справиться с этим с параметром параметров, так что вот что у меня есть на тот момент («всплывающие подсказки» менялись много раз) 

    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,
    }
};

Чего я хочу достичь?Вероятно, может помочь положение всплывающей подсказки, чтобы отразить ее отражение, но у меня есть проблемы для этого.А может, у кого-то есть другая идея?

1 Ответ

0 голосов
/ 01 марта 2019

Итак, я думаю, я понял вашу проблему!Ваши параметры всплывающей подсказки должны быть внутри аргумента параметров!

Примерно так: 

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

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

Я подготовил скрипку со случайными данными и с помощью специальной функции заставил всплывающую подсказку всегда быть сверху.Вы также можете console.log(tooltipModel) и бездельничать с параметрами для предполагаемых стилей.

Надеюсь, это вам поможет.

JSFiddle

...