Javascript charts.js-使用工具提示数据的自定义事件（折线图）

Charts.js具有（2015年年中新实现的）自定义功能，可在工具提示正常出现时触发，允许用户创建自定义行为

对于具有多个数据集的折线图，如何访问工具提示数据、对其进行解析并操作高亮显示的数据点的数值

例如，可以触发警报而不是工具提示，因此：

Chart.defaults.global.customTooltips = function (tooltip) {
    alert('Hello');
}

但是，如何获取工具提示中显示的数据、解析并使用它呢

我发布了一个答案，演示了如何获取所有工具提示数据，但如果用户悬停在单个数据点上，我们如何仅获取悬停点的数据？或者，是否可以单击单个数据点并仅获取该数据，以便我们知道单击了哪个数据点？

---

我将接受显示如何获取单个（悬停或单击）数据点的正确答案。以下是如何定义自定义工具提示功能：

Chart.defaults.global.customTooltips = function (tooltip) {}

这会在工具提示触发时触发。（请注意，工具提示不会标识悬停在单个数据点上。相反，它们返回整个垂直序列。）

工具提示

对象包含每个悬停（垂直）系列的以下属性：

• 标题：x轴标签（垂直），如“三月”
• 标签：所有数据点（垂直），例如[29,86]

此外，可以访问悬停序列的数据集，如下所示：

• 数据集[0]：第一系列（水平），例如[65,59,80,81,56,55,40]
• data.dataset[1]。标签：第二个水平数据系列的标签

下面是移动鼠标时提取此数据的示例：

HTML:

<div class="panel panel-success">
    <div id="rpt"></div>
    <div class="panel-heading">
        <div id="i">
            Change purple series: 
            <input id="ii" type="text" value="99"/> 
            <button id="ib">Update</button>
        </div>
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

//Update 2nd datapoint, purple series
$('#ib').click(function(){
    tmp = $('#ii').val();
    myLineChart.datasets[0].points[2].value = tmp;
    myLineChart.update();
    $('#ii').val( ~~(Math.random() * 80) + 20 ); //gen new number
});

//Custom Tooltip Function - try uncommenting various alerts
Chart.defaults.global.customTooltips = function (tooltip) {
    if (tooltip.y){
        tt = tooltip.title;
        ll = tooltip.labels;
        no = tooltip.labels.length;
        rpt = 'Title: ' +tt+ ' - Data: ';
        for (i=0;i<no;i++){
//            alert( data.datasets[i].strokeColor );
//            alert( data.datasets.length );
//            alert( data.datasets[i].label );
//            alert( tooltip.labels[i] );
            rpt += data.datasets[i].label +': '+ ll[i] +'; ';
        }
        alert(rpt);
        //alert('Title: ' +tt+ ' - Data: ' +ll );
        //alert( JSON.stringify(tooltip) );
        //$('#rpt').html( JSON.stringify(tooltip) );
    }
}

//Chart data
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Purple Cows",
        fillColor: "rgba(220,20,20,0.2)",
        strokeColor: "purple",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "Red Heifers",
        fillColor: "rgba(151,187,205,0.9)",
        strokeColor: "red",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};

//Chart options
var options = {
    animation: false,
    scaleOverride: true,
    scaleSteps: 3,
    scaleStepWidth: 30,
    scaleStartValue: 10,

    responsive: true,
    maintainAspectRatio: false,
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleGridLineWidth : 1,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    bezierCurve : false,
    bezierCurveTension : 0.4,
    pointDot : true,
    pointDotRadius : 3,
    pointDotStrokeWidth : 1,
    pointHitDetectionRadius : 20,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : false
}

//Create the chart, based on above data
var ctx = $("#myChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);

变紫系列：
更新
小组标题

javascript/jQuery:

<div class="panel panel-success">
    <div id="rpt"></div>
    <div class="panel-heading">
        <div id="i">
            Change purple series: 
            <input id="ii" type="text" value="99"/> 
            <button id="ib">Update</button>
        </div>
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

//Update 2nd datapoint, purple series
$('#ib').click(function(){
    tmp = $('#ii').val();
    myLineChart.datasets[0].points[2].value = tmp;
    myLineChart.update();
    $('#ii').val( ~~(Math.random() * 80) + 20 ); //gen new number
});

//Custom Tooltip Function - try uncommenting various alerts
Chart.defaults.global.customTooltips = function (tooltip) {
    if (tooltip.y){
        tt = tooltip.title;
        ll = tooltip.labels;
        no = tooltip.labels.length;
        rpt = 'Title: ' +tt+ ' - Data: ';
        for (i=0;i<no;i++){
//            alert( data.datasets[i].strokeColor );
//            alert( data.datasets.length );
//            alert( data.datasets[i].label );
//            alert( tooltip.labels[i] );
            rpt += data.datasets[i].label +': '+ ll[i] +'; ';
        }
        alert(rpt);
        //alert('Title: ' +tt+ ' - Data: ' +ll );
        //alert( JSON.stringify(tooltip) );
        //$('#rpt').html( JSON.stringify(tooltip) );
    }
}

//Chart data
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Purple Cows",
        fillColor: "rgba(220,20,20,0.2)",
        strokeColor: "purple",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "Red Heifers",
        fillColor: "rgba(151,187,205,0.9)",
        strokeColor: "red",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};

//Chart options
var options = {
    animation: false,
    scaleOverride: true,
    scaleSteps: 3,
    scaleStepWidth: 30,
    scaleStartValue: 10,

    responsive: true,
    maintainAspectRatio: false,
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleGridLineWidth : 1,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    bezierCurve : false,
    bezierCurveTension : 0.4,
    pointDot : true,
    pointDotRadius : 3,
    pointDotStrokeWidth : 1,
    pointHitDetectionRadius : 20,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : false
}

//Create the chart, based on above data
var ctx = $("#myChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);

//更新第二个数据点，紫色系列
$（'#ib'）。单击（函数（）{
tmp=$（'#ii'）.val（）；
myLineChart.datasets[0]。点[2]。值=tmp；
myLineChart.update（）；
$（'#ii'）.val（~~（Math.random（）*80）+20）；//生成新数字
});
//自定义工具提示功能-尝试取消注释各种警报
Chart.defaults.global.customTooltips=函数（工具提示）{
如果（工具提示.y）{
tt=工具提示.title；
ll=工具提示。标签；
否=tooltip.labels.length；
rpt='标题：'+tt+'-数据：'；
对于（i=0；i，以下是如何定义自定义工具提示函数：

Chart.defaults.global.customTooltips = function (tooltip) {}

这会在任何时候触发工具提示。（请注意，工具提示不会标识悬停在单个数据点上的位置。相反，它们返回整个垂直序列。）

工具提示
对象包含每个悬停（垂直）系列的以下属性：


标题：x轴标签（垂直），如“三月”
标签：所有数据点（垂直），例如[29,86]

此外，可以访问悬停序列的数据集，如下所示：


数据集[0]：第一系列（水平），例如[65,59,80,81,56,55,40]
data.dataset[1]。标签：第二个水平数据系列的标签

下面是移动鼠标时提取此数据的示例：


HTML:

<div class="panel panel-success">
    <div id="rpt"></div>
    <div class="panel-heading">
        <div id="i">
            Change purple series: 
            <input id="ii" type="text" value="99"/> 
            <button id="ib">Update</button>
        </div>
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

//Update 2nd datapoint, purple series
$('#ib').click(function(){
    tmp = $('#ii').val();
    myLineChart.datasets[0].points[2].value = tmp;
    myLineChart.update();
    $('#ii').val( ~~(Math.random() * 80) + 20 ); //gen new number
});

//Custom Tooltip Function - try uncommenting various alerts
Chart.defaults.global.customTooltips = function (tooltip) {
    if (tooltip.y){
        tt = tooltip.title;
        ll = tooltip.labels;
        no = tooltip.labels.length;
        rpt = 'Title: ' +tt+ ' - Data: ';
        for (i=0;i<no;i++){
//            alert( data.datasets[i].strokeColor );
//            alert( data.datasets.length );
//            alert( data.datasets[i].label );
//            alert( tooltip.labels[i] );
            rpt += data.datasets[i].label +': '+ ll[i] +'; ';
        }
        alert(rpt);
        //alert('Title: ' +tt+ ' - Data: ' +ll );
        //alert( JSON.stringify(tooltip) );
        //$('#rpt').html( JSON.stringify(tooltip) );
    }
}

//Chart data
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Purple Cows",
        fillColor: "rgba(220,20,20,0.2)",
        strokeColor: "purple",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "Red Heifers",
        fillColor: "rgba(151,187,205,0.9)",
        strokeColor: "red",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};

//Chart options
var options = {
    animation: false,
    scaleOverride: true,
    scaleSteps: 3,
    scaleStepWidth: 30,
    scaleStartValue: 10,

    responsive: true,
    maintainAspectRatio: false,
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleGridLineWidth : 1,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    bezierCurve : false,
    bezierCurveTension : 0.4,
    pointDot : true,
    pointDotRadius : 3,
    pointDotStrokeWidth : 1,
    pointHitDetectionRadius : 20,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : false
}

//Create the chart, based on above data
var ctx = $("#myChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);


变紫系列：
更新
小组标题

javascript/jQuery:

<div class="panel panel-success">
    <div id="rpt"></div>
    <div class="panel-heading">
        <div id="i">
            Change purple series: 
            <input id="ii" type="text" value="99"/> 
            <button id="ib">Update</button>
        </div>
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        <canvas id="myChart" width="600" height="400"></canvas>
    </div>
</div>

//Update 2nd datapoint, purple series
$('#ib').click(function(){
    tmp = $('#ii').val();
    myLineChart.datasets[0].points[2].value = tmp;
    myLineChart.update();
    $('#ii').val( ~~(Math.random() * 80) + 20 ); //gen new number
});

//Custom Tooltip Function - try uncommenting various alerts
Chart.defaults.global.customTooltips = function (tooltip) {
    if (tooltip.y){
        tt = tooltip.title;
        ll = tooltip.labels;
        no = tooltip.labels.length;
        rpt = 'Title: ' +tt+ ' - Data: ';
        for (i=0;i<no;i++){
//            alert( data.datasets[i].strokeColor );
//            alert( data.datasets.length );
//            alert( data.datasets[i].label );
//            alert( tooltip.labels[i] );
            rpt += data.datasets[i].label +': '+ ll[i] +'; ';
        }
        alert(rpt);
        //alert('Title: ' +tt+ ' - Data: ' +ll );
        //alert( JSON.stringify(tooltip) );
        //$('#rpt').html( JSON.stringify(tooltip) );
    }
}

//Chart data
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Purple Cows",
        fillColor: "rgba(220,20,20,0.2)",
        strokeColor: "purple",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }, {
        label: "Red Heifers",
        fillColor: "rgba(151,187,205,0.9)",
        strokeColor: "red",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};

//Chart options
var options = {
    animation: false,
    scaleOverride: true,
    scaleSteps: 3,
    scaleStepWidth: 30,
    scaleStartValue: 10,

    responsive: true,
    maintainAspectRatio: false,
    scaleShowGridLines : true,
    scaleGridLineColor : "rgba(0,0,0,.05)",
    scaleGridLineWidth : 1,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    bezierCurve : false,
    bezierCurveTension : 0.4,
    pointDot : true,
    pointDotRadius : 3,
    pointDotStrokeWidth : 1,
    pointHitDetectionRadius : 20,
    datasetStroke : true,
    datasetStrokeWidth : 2,
    datasetFill : false
}

//Create the chart, based on above data
var ctx = $("#myChart").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);

//更新第二个数据点，紫色系列
$（'#ib'）。单击（函数（）{
tmp=$（'#ii'）.val（）；
myLineChart.datasets[0]。点[2]。值=tmp；
myLineChart.update（）；
$（'#ii'）.val（~~（Math.random（）*80）+20）；//生成新数字
});
//自定义工具提示功能-尝试取消注释各种警报
Chart.defaults.global.customTooltips=函数（工具提示）{
如果（工具提示.y）{
tt=工具提示.title；
ll=工具提示。标签；
否=tooltip.labels.length；
rpt='标题：'+tt+'-数据：'；
对于（i=0；i