修改Chart.JS中散点图的信息框 [英] Modify the information box of the scatter chart in Chart.JS

问题描述

我正在使用 chart.js 中的散点图，并且我需要修改高于某个点时显示的信息。我认为包含此信息的框称为 tooltip 。

I'm working with a scatter chart in chart.js and I need to modify the info what I show when I'm above a point. I think the box that contains this information is called tooltip.

在下面，我展示我现在拥有的东西，

Below I show what I have now,

我想要做的是修改第一个，并放入 14:52 就像x轴一样。

What I want to do is modify the first one, and put 14:52 like the x-axis.

在x轴上很容易，

options: {
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom',
            ticks: {
                callback: function(value, index, values) {
                    var time = String(value);
                    if (time.length == 3){
                        time = '0' + time;
                    }
                    var hour = time[0] + time[1];
                    var min = time[2] + time[3];
                    var label = hour + ':' + min;
                    return label;
                }
            }
        }]
    }
}

我想在这里我必须使用相同的函数，但是我不知道在哪里。我无法访问包含信息的框，它的名称不是工具提示吗？例如，我正在执行以下代码，但没有任何变化。

And I suppose here I have to use the same function, but I don't know where. I'm not able to access to the box with the information, isn't its name tooltips? For example, I'm doing the code below but nothing change.

tooltips:{
    title: "New title"
}

如何修改该框？

非常感谢

推荐答案

标题和工具提示上的其他项目可以使用回调功能。正确的语法如下所示。

The title and other items on the tooltip can be customized using callback functions. The correct syntax looks as follows.

tooltips:{
    callbacks: {
        title: (tooltipItem, data) => "New title"
    }
}

请同时查看以下是来自 https://www.chartjs.org/samples/的更复杂的示例Latest / tooltips / callbacks.html 。无论使用散点图还是线图表，都应该没有区别。

Please also have a look on the following more complex sample derived from https://www.chartjs.org/samples/latest/tooltips/callbacks.html. It should make no difference whether you work with a scatter or a line chart.

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            borderColor: 'red',
            backgroundColor: 'red',
            data: [15, 22, 18, 28, 8, 13, 24],
            fill: false,
        }, {
            label: 'My Second dataset',
            borderColor: 'blue',
            backgroundColor: 'blue',
            data: [5, 31, 15, 22, 19, 29, 12],
            fill: false,
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js Line Chart - Custom Information in Tooltip'
        },
        tooltips: {
            mode: 'index',
            callbacks: {
                title: (tooltipItem, data) => data.labels[tooltipItem[0].index],
                footer: (tooltipItems, data) => {
                    var sum = 0;
                    tooltipItems.forEach(function(tooltipItem) {
                        sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    });
                    return 'Sum: ' + sum;
                },
            },
            footerFontStyle: 'normal'
        },
        hover: {
            mode: 'index',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    show: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    show: true,
                    labelString: 'Value'
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

>

这篇关于修改Chart.JS中散点图的信息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！