javascript - 如何使用 chartjs 2 从图表外部触发悬停模式？

Question

我想通过单击一个按钮同时在多个图表上重现悬停行为。我正在考虑将等效的按钮 ID 放入图形标签中。

例如，通过单击橙色按钮(参见附图)，我得到了他的 ID，我想在每个图表的每个橙色项目中触发事件悬停(其标签与按钮的 ID 相同)。

我可以检测到哪个项目具有与我的 ID 等效的标签，但我不知道如何在其上复制悬停行为。

有没有办法强制在图表中的项目上设置悬停模式？

我的 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
    }
  });
})

这是代码的 fiddle :https://jsfiddle.net/8wye9vL4/28/

Answer 1

如果您正在寻找一种通过单击按钮来显示特定元素的工具提示的方法，您可以查看 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>