Chartjs 悬停在一个图表上，显示所有图表的工具提示

Question

我正在使用带角度的 ChartJS (https://jtblin.github.io/angular-chart.js/) 使用How to render a vertical line on hover in chartjs example.

悬停时，我能够在我的图表中得到一条垂直线

我试着寻找曲线图的示例，其中 X 轴在 DOM 中的所有图表之间具有共享的日期范围，但 Y 轴具有不同的值。将鼠标悬停在任何图表上将触发悬停在所有可用图表上，并在所有图表上显示如上所示的垂直线和工具提示

Answer 1

    tooltips: {
      mode: 'x-axis'
    },

如果我正确理解你想要什么，这应该可以做到。

Answer 2

这个 jsfiddle 可以帮助你：

https://jsfiddle.net/vikas12118/k4oveLsb/

 var charts = [];

$(document).ready(function () {

    Chart.defaults.LineWithLine = Chart.defaults.line;
    Chart.controllers.LineWithLine = Chart.controllers.line.extend({
        draw: function(ease) {
            if (charts) {
                for (var i = 0; i < charts.length; i++) {
                    charts[i].tooltip._active = [];
                    charts[i].tooltip.update(true);
                    charts[i].draw();
                }
            }
            Chart.controllers.line.prototype.draw.call(this, ease);

            if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
                var activePoint = this.chart.tooltip._active[0],
                    ctx = this.chart.ctx,
                    x = activePoint.tooltipPosition().x,
                    topY = this.chart.scales['y-axis-0'].top,
                    bottomY = this.chart.scales['y-axis-0'].bottom;

                // draw line
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(x, topY);
                ctx.lineTo(x, bottomY);
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#07C';
                ctx.stroke();
                ctx.restore();
                if(charts)
                {
                    showTooltip(chart1.chart.tooltip._active[0]._index);

                }
            }
        }
    });



    var ctx1 = document.getElementById('myChart1').getContext('2d');
    var chart1 = new Chart(ctx1, {
        type: 'LineWithLine',
        data: {
            labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
            datasets: [{
                lineTension: 0,
                backgroundColor: "rgb(34,139,34)",
                borderColor: "rgb(34,139,34)",
                data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22],
                fill: false,
                pointRadius: 1.5,
                pointHoverRadius: 1,
                borderWidth :1.5
            }],
        },
        options: {
            maintainAspectRatio: false,
            responsive: false,
            /*legend: {
                display: false
            }, s: {
                displayColors: false
            },*/
            hover: {
                mode: 'index',
                intersect: false,
            },
            title: {
                display: true,
                text: ''
            },
            legend: {
                display: false
            },
            tooltips: {
                mode: 'index',
                //enabled: false,
                intersect: false,
            },
        }
    });


     var ctx2 = document.getElementById('myChart2').getContext('2d');
    Chart.defaults.LineWithLine = Chart.defaults.line;
    Chart.controllers.LineWithLine = Chart.controllers.line.extend({
        draw: function(ease) {
            Chart.controllers.line.prototype.draw.call(this, ease);

            if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
                var activePoint = this.chart.tooltip._active[0],
                    ctx = this.chart.ctx,
                    x = activePoint.tooltipPosition().x,
                    topY = this.chart.scales['y-axis-0'].top,
                    bottomY = this.chart.scales['y-axis-0'].bottom;

                // draw line
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(x, topY);
                ctx.lineTo(x, bottomY);
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#07C';
                ctx.stroke();
                ctx.restore();
            }
        }
    });

    var chart = new Chart(ctx2, {
        type: 'LineWithLine',
        data: {
            labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'],
            datasets: [{
                lineTension: 0,
                backgroundColor: "rgb(34,139,34)",
                borderColor: "rgb(34,139,34)",
                data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8],
                fill: false,
                pointRadius: 1.5,
                pointHoverRadius: 1,
                borderWidth :1.5
            }],
        },
        options: {
            maintainAspectRatio: false,
            responsive: false,
            title: {
                display: true,
                text: ''
            },
            legend: {
                display: false
            },
            tooltips: {
                mode: 'index',
                //enabled: false,
                intersect: false,
            },
        }

    });

    charts.push(chart)

});


function showTooltip(index) {
    if (Array.isArray(charts) && charts.length) {
        for (var i = 0; i < charts.length; i++) {
            var segment = charts[i].getDatasetMeta(0).data[index];
            charts[i].tooltip._active = [segment];
            charts[i].tooltip.update(true);
            charts[i].draw();
        }
    }
}

html 内容

<div>
<canvas style="width: 800px" height="300px" id="myChart1"></canvas></div>
<div>
  <canvas style="width: 800px" height="300px" id="myChart2"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

Answer 3

对于任何使用 React、chartjs 和 react-chartjs-2 并希望创建带有同步工具提示的仪表板的人来说，这里有一个如何做到这一点的示例。我还使用了一个缩放插件，让你可以通过点击和拖动来缩放

https://codesandbox.io/s/chart-js-synchronized-tooltips-with-zoom-cccdlg?file=/src/App.js