如何使用JavaScript中JSON数组中的数据为chartJS图形创建自定义工具提示？

我使用chartJS创建了一个条形图。我想在图形工具提示中显示JSON数组中的数据

JSON

{
    "meth": [ {
        "tech": "CSS", "avg": 3, "Count": 80, "sum": 53
    }
    ,
    {
        "tech": "CCS", "avg": 9, "Count": 70, "sum": 25
    }
    ,
    {
        "tech": "CSC", "avg": 7, "Count": 50, "sum": 66
    }
    ]
}

上面的json数据用于在javascript中使用chartJS绘制图形，但我希望其他数据作为工具提示显示在图形中。数据平均值和总和应显示为工具提示的一部分，同时标签显示为技术，数据显示为计数

Javascript中的图形代码：

<script> 
var ctx1=document.getElementById('bar').getContext('2d');
var myChart1=new Chart(ctx1, {
    type: 'bar', legend: {
        display: true
    }
    , options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var dataset=data.datasets[tooltipItem.datasetIndex];
                    return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+"%";
                }
            }
        }
        , scales: {
            yAxes: [ {
                ticks: {
                    beginAtZero: true, steps: 10, stepValue: 5, max: 100
                }
            }
            ]
        }
    }
    , data: {
        labels: techDATA, datasets: [ {
            backgroundColor: colorCode, label: 'Method Covered', data: countDATA
        }
        ]
    }
}

);
</script>

var ctx1=document.getElementById（'bar'）.getContext（'2d'）；
var myChart1=新图表（ctx1{
类型：“条形”，图例：{
显示：真
}
，选项：{
工具提示：{
回调：{
标签：函数（工具提示项、数据）{
var dataset=data.datasets[tooltipItem.datasetIndex]；
返回data.datasets[tooltipItem.datasetIndex].label+'：'+dataset.data[tooltipItem.index]+“%”；
}
}
}
，比例：{
雅克斯：[{
滴答声：{
beginAtZero:true，步长：10，步长值：5，最大值：100
}
}
]
}
}
，数据：{
标签：techDATA，数据集：[{
背景颜色：颜色代码，标签：“方法覆盖”，数据：countDATA
}
]
}
}
);

我想在工具提示中显示数据，如avg和sum，该工具提示已经具有带有标签和数据的默认工具提示。

---

请帮我编写代码

使用chartjs自定义工具提示的图形。

JavaScript代码

//
// appcharts.js

//alert("ToolTips");
//var countDATAt = [80, 70, 50];
//var techDATAt = ["CSS", "CCS", "CSC"];
//var avgDATAt = [3, 9, 7];
//var sumDATAt = [53, 25, 66];
var dataJason = {
    "meth": [{
        "tech": "CSS", "avg": 3, "Count": 80, "sum": 53
    },
    {
        "tech": "CCS", "avg": 9, "Count": 70, "sum": 25
    },
    {
        "tech": "CSC", "avg": 7, "Count": 50, "sum": 66
    }]
};

var techDATA = [];
var countDATA = [];
var avgDATA = [];
var sumDATA = [];
function techData(){
    var jdata = dataJason.meth;
    var jl = jdata.length;
    for(var i = 0; i < jl; i++){
        techDATA.push(dataJason.meth[i].tech);
        countDATA.push(dataJason.meth[i].Count);
        avgDATA.push(dataJason.meth[i].avg);
        sumDATA.push(dataJason.meth[i].sum);
    }
}

var colorCode = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
];

function init(){
    techData();
    var ctx1 = document.getElementById("bar").getContext('2d');
    var myChart1 = new Chart(ctx1, {
                type: 'bar', legend: {
                display: true
            }, 
            options: {
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var avg = ", avg: "+avgDATA[tooltipItem.index];
                            var sum = ", sum: "+sumDATA[tooltipItem.index];
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            return data.datasets[tooltipItem.datasetIndex].label+ ' : '+dataset.data[tooltipItem.index]+"%"+avg+sum;
                        }
                    }
                }, 
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true, steps: 10, stepValue: 5, max: 100
                        }
                    }]
                }
            }, 
            data: {
                labels: techDATA, datasets: [{
                    backgroundColor: colorCode, label: 'Method Covered', data: countDATA
                }]
            }
       }
   );
}

window.onload = function(){
  init();  
};

//alert("Done");

//

//
//appcharts.js
//警告（“工具提示”）；
//var countDATAt=[80,70,50]；
//var techDATAt=[“CSS”、“CCS”、“CSC”]；
//var avgDATAt=[3,9,7]；
//var sumDATAt=[53,25,66]；
var dataJason={
“meth”：[{
“技术”：“CSS”，“平均值”：3，“计数”：80，“总和”：53
},
{
“技术”：“CCS”，“平均值”：9，“计数”：70，“总和”：25
},
{
“技术”：“CSC”，“平均值”：7，“计数”：50，“总和”：66
}]
};
var-techDATA=[]；
var countDATA=[]；
var avgDATA=[]；
var sumDATA=[]；
函数techData（）{
var jdata=dataJason.meth；
var jl=jdata.length；
对于（变量i=0；i

HTML代码

<!DOCTYPE html>
<!--
index.html
-->
<html>
    <head>
        <title>Custom tooltip</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="lib/charts/Chart.bundle.js"></script>
        <script src="js/appcharts.js"></script>
    </head>
    <body>
        <br><hr><br>
        <div id="myCan">
            <canvas id="bar" width="100" height="100"></canvas>
        </div>
        <br><hr><br>
    </body>
</html>

自定义工具提示

享受

---

---

使用chartjs自定义工具提示的图形。

JavaScript代码

//
// appcharts.js

//alert("ToolTips");
//var countDATAt = [80, 70, 50];
//var techDATAt = ["CSS", "CCS", "CSC"];
//var avgDATAt = [3, 9, 7];
//var sumDATAt = [53, 25, 66];
var dataJason = {
    "meth": [{
        "tech": "CSS", "avg": 3, "Count": 80, "sum": 53
    },
    {
        "tech": "CCS", "avg": 9, "Count": 70, "sum": 25
    },
    {
        "tech": "CSC", "avg": 7, "Count": 50, "sum": 66
    }]
};

var techDATA = [];
var countDATA = [];
var avgDATA = [];
var sumDATA = [];
function techData(){
    var jdata = dataJason.meth;
    var jl = jdata.length;
    for(var i = 0; i < jl; i++){
        techDATA.push(dataJason.meth[i].tech);
        countDATA.push(dataJason.meth[i].Count);
        avgDATA.push(dataJason.meth[i].avg);
        sumDATA.push(dataJason.meth[i].sum);
    }
}

var colorCode = [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
];

function init(){
    techData();
    var ctx1 = document.getElementById("bar").getContext('2d');
    var myChart1 = new Chart(ctx1, {
                type: 'bar', legend: {
                display: true
            }, 
            options: {
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var avg = ", avg: "+avgDATA[tooltipItem.index];
                            var sum = ", sum: "+sumDATA[tooltipItem.index];
                            var dataset = data.datasets[tooltipItem.datasetIndex];
                            return data.datasets[tooltipItem.datasetIndex].label+ ' : '+dataset.data[tooltipItem.index]+"%"+avg+sum;
                        }
                    }
                }, 
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true, steps: 10, stepValue: 5, max: 100
                        }
                    }]
                }
            }, 
            data: {
                labels: techDATA, datasets: [{
                    backgroundColor: colorCode, label: 'Method Covered', data: countDATA
                }]
            }
       }
   );
}

window.onload = function(){
  init();  
};

//alert("Done");

//

//
//appcharts.js
//警告（“工具提示”）；
//var countDATAt=[80,70,50]；
//var techDATAt=[“CSS”、“CCS”、“CSC”]；
//var avgDATAt=[3,9,7]；
//var sumDATAt=[53,25,66]；
var dataJason={
“meth”：[{
“技术”：“CSS”，“平均值”：3，“计数”：80，“总和”：53
},
{
“技术”：“CCS”，“平均值”：9，“计数”：70，“总和”：25
},
{
“技术”：“CSC”，“平均值”：7，“计数”：50，“总和”：66
}]
};
var-techDATA=[]；
var countDATA=[]；
var avgDATA=[]；
var sumDATA=[]；
函数techData（）{
var jdata=dataJason.meth；
var jl=jdata.length；
对于（变量i=0；i