如何通过单击 Chart.js v2 canvas 外部的自定义按钮来导航工具提示弹出窗口？

Question

讨论 Chart.js v2 库下的移动可用性，

我们可以模拟雷达图中那些"score points"的点击事件吗？我问这个是因为，通过单击图表中的那些点以通过返回的索引触发外部交互，桌面视图和平板电脑视图看起来非常适合 "score points" 导航。

一个流行的例子是

$('#ChartV2').click(function(e) {
            var activePoints = myRadarChart.getElementsAtEvent(e);                  
            var firstPoint = activePoints[0];
            console.log(firstPoint);
            if (firstPoint !== undefined){
               alert(firstPoint._index); 
               //so then we can use 
              // index to hide show results in the  html elements out of canvas , etc
            }

});

但是如果你查看移动视图，在 responsive:true 下，图表将通过自动调整大小变得更小，因此雷达图中的点对于移动点击来说可能非常小，
和标签一样，一切都会变小，更难点击。

是否可以自定义让用户导航那些 "score points" （最初由手动点击 canvas 触发）

是否可以通过以下方式间接触发外部 "prev"、"next" 导航按钮在雷达图的左右两侧例如那些滑块/旋转木马导航按钮？

Answer 1

您可以利用图表实例方法来做到这一点

脚本

var myRadarChart = new Chart(ctx, {
    ...

(function (chart) {
    var helpers = Chart.helpers;

    var currentDatasetIndex;
    var currentPointIndex;

    $('#ChartV2').click(function (e) {
        // try getting an element close to the click
        var activePoints = chart.getElementAtEvent(e);
        var firstPoint = activePoints[0];

        if (firstPoint === undefined) {
            // otherwise pick the first visible element
            helpers.each(chart.data.datasets, function (dataset, datasetIndex) {
                if (firstPoint === undefined && this.isDatasetVisible(datasetIndex)) {
                    var meta = this.getDatasetMeta(datasetIndex);
                    firstPoint = meta.data[0];
                }
            }, chart);
        }

        // need this check as we may have 0 visible elements
        if (firstPoint !== undefined) {
            currentDatasetIndex = firstPoint._datasetIndex;
            currentPointIndex = firstPoint._index;
            $('#prev, #next').removeAttr('disabled');
            updateView();
        }
    });

    $('#prev').click(function () {
        // we add (n - 1) and do a modulo n to move one step back in an n element array.
        if (currentPointIndex === 0)
            currentDatasetIndex = (currentDatasetIndex + chart.data.datasets.length - 1) % chart.data.datasets.length;
        currentPointIndex = (currentPointIndex + chart.data.labels.length - 1) % chart.data.labels.length;
        updateView();
    });

    $('#next').click(function () {
        currentPointIndex = (currentPointIndex + 1) % chart.data.labels.length;
        if (currentPointIndex === 0)
            currentDatasetIndex = (currentDatasetIndex + 1) % chart.data.datasets.length;
        updateView();
    });


    // this (hoisted) function will update the text and show the tooltip
    function updateView() {
        $('#value').text(
            chart.data.datasets[currentDatasetIndex].label + ' : ' +
            chart.data.labels[currentPointIndex] + ' : ' +
            chart.data.datasets[currentDatasetIndex].data[currentPointIndex]);

        // we mess around with an internal variable here - this may not work with a new version
        chart.tooltip._active = [ chart.getDatasetMeta(currentDatasetIndex).data[currentPointIndex] ];
        chart.tooltip.update();
        chart.render();
    }

}(myRadarChart));

如果您只想在小屏幕上使用此功能，只需将屏幕尺寸检查添加到上面的图表点击处理程序并使用媒体查询隐藏按钮和标签。

Fiddle - http://jsfiddle.net/uxqL6rwf/

如何通过单击 Chart.js v2 canvas 外部的自定义按钮来导航工具提示弹出窗口？

How to navigate tooltips popup by clicking custom buttons outside Chart.js v2 canvas?

html

javascript

canvas

chart.js

chart.js2