Как я могу запустить режим наведения вне графика с помощью charts.js 2? - PullRequest
Новая
       11

Как я могу запустить режим наведения вне графика с помощью charts.js 2?

0 голосов
/ 06 сентября 2018

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

How it will look like

Например, нажимая на оранжевую кнопку (см. Прикрепленное изображение), я получаю его идентификатор, и я хотел бы вызвать наведение на событие в каждом оранжевом элементе каждого графика (который имеет метку, идентичную идентификатору кнопки).

Я могу определить, какой элемент имеет метку, эквивалентную моему идентификатору, но я не знаю, как повторить на нем поведение наведения.

Есть ли способ принудительно активировать режим наведения на элементах в диаграммах?

МОЙ HTML: 

<div class="graph">
  <canvas id="ctx"></canvas>
  <button type="button" class="btn btn-primary" id="OCG">Test</button>
</div>

МОЙ JS: 

var ctx = document.getElementById('ctx').getContext('2d');
var ocacolor = '#EE8B54',
    ocbcolor = '#C2B49B',
    ocbacolor = '#AECF86',
    ocgcolor = '#E97676',
    ocpcolor = '#088DA5';
var backgroundcolor = [ocacolor, ocbcolor, ocbacolor, ocgcolor, ocpcolor]

data = {
    datasets: [{
        data: [1, 1, 1, 4, 1],
        backgroundColor: backgroundcolor
    }],
    labels: [
        'OCA',
        'OCB',
        'OCBA',
        'OCG',
        'OCP'
    ]
};

//CREATING CHART
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
        legend: {
            display: false
        },
        onClick : function(evt,dataset){
            //I GET THE LABEL TEXT OF THE CLICKED ITEM
          console.log(dataset[0]._model.label);
        }
    }
});

$("#OCG").click(function(){
  var plop = this.id
  myDoughnutChart.data.labels.forEach(function(element) {
    if (element == plop) {
      //GET THIS ITEM ID AND PUT IT ON HOVER MODE
    }
  });
})

Вот скрипка с кодом: https://jsfiddle.net/8wye9vL4/28/

1 Ответ

0 голосов
/ 07 сентября 2018

Если вы ищете способ показать подсказку для определенного элемента, нажав на кнопку, вы можете взглянуть на github или SO

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

Я добавил свойство в ваши параметры в Chartjs: 

showMyTooltips: '',

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

Вот фрагмент: 

Chart.pluginService.register({
    beforeRender: function (chart) {
        if (!!chart.config.options.showMyTooltips && chart.config.options.showMyTooltips.trim().length != 0) {
            chart.pluginTooltips = [];
            chart.config.options.showMyTooltips.trim().split(',').forEach(function (ele, idx) {
                var sector = chart.getDatasetMeta(0).data[ele];
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                }, chart));
            });
        }
    },
    afterDraw: function (chart, easing) {
        if (chart.config.options.showMyTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart.allTooltipsOnce) {
                if (easing !== 1)
                    return;
                chart.allTooltipsOnce = true;
            }
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
        }
    }
});

var ctx = document.getElementById('ctx').getContext('2d');
var ocacolor = '#EE8B54',
        ocbcolor = '#C2B49B',
        ocbacolor = '#AECF86',
        ocgcolor = '#E97676',
        ocpcolor = '#088DA5';
var backgroundcolor = [ocacolor, ocbcolor, ocbacolor, ocgcolor, ocpcolor]

data = {
    datasets: [{
        data: [5, 2, 3, 9, 2],
        backgroundColor: backgroundcolor
    }],
    labels: [
        'OCA',
        'OCB',
        'OCBA',
        'OCG',
        'OCP'
    ]
};
//CREATING CHART
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: {
        legend: {
            display: false
        },
        showMyTooltips: '',
        onClick: function (evt, dataset) {
            //I GET THE LABEL TEXT OF THE CLICKED ITEM
            console.log(dataset[0]._model.label);
        }
    }
});

$(":radio").on('change', function (e) {
    myDoughnutChart.options.showMyTooltips = myDoughnutChart.data.labels.indexOf(this.id).toString();
    myDoughnutChart.update(true);
})
.graph{
    height: 500px;
    width: 500px;
    text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>


<div class="graph">
    <canvas id="ctx"></canvas>
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="OCA" autocomplete="off"> Test OCA
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="OCB" autocomplete="off"> Test OCB
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="OCBA" autocomplete="off"> Test OCBA
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="OCG" autocomplete="off"> Test OCG
        </label>
        <label class="btn btn-secondary">
            <input type="radio" name="options" id="OCP" autocomplete="off"> Test OCP
        </label>
    </div>
</div>
...