Javascript Chart.js-具有多个值的自定义工具提示
我有一个条形图，我想在工具提示框中显示第二个标签，该标签将从我的数据库中填充。您可以从下面的代码中看到，我已经开始设置它，以便在工具提示中显示多个标签（短、长），并且我希望能够将来自数据库的多个值显示为标签 例如，我有一座桥的ID为135554（bridge_ID_grab），这座桥有35年的历史（bridge_age_grab），位于里程标13.34（bridge_mp_grab） 所以我希望它在工具提示中显示为 “桥梁ID:135554， 桥龄：35岁， 里程碑：13.34“ 我想我已经很接近了——只是不知道如何使用get-just-one-value作为bridge\mp\u grab的值——它显示为数据库中所有值的字符串 这是我的密码：Javascript Chart.js-具有多个值的自定义工具提示,javascript,charts,chart.js,Javascript,Charts,Chart.js,我有一个条形图，我想在工具提示框中显示第二个标签，该标签将从我的数据库中填充。您可以从下面的代码中看到，我已经开始设置它，以便在工具提示中显示多个标签（短、长），并且我希望能够将来自数据库的多个值显示为标签 例如，我有一座桥的ID为135554（bridge_ID_grab），这座桥有35年的历史（bridge_age_grab），位于里程标13.34（bridge_mp_grab） 所以我希望它在工具提示中显示为 “桥梁ID:135554， 桥龄：35岁， 里程碑：13.34“ 我想我已经很接
function Label(short, long) {
this.short = short;
this.long = long
}
Label.prototype.toString = function() {
return this.short;
}
var barChartData2 = {
//labels : bridge_id_grab,
labels: [
new Label("J", bridge_mp_grab),
new Label("F", "FEB"),
new Label("M", "MAR"),
new Label("A", "APR"),
new Label("M", "MAY"),
new Label("J", "JUN"),
new Label("J", "JUL")
],
datasets : [
{
label: "My First dataset",
fillColor : ["rgba(220,220,220,0.5)"],
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : bridge_age_grab,
}
]
}
var context = document.getElementById('serviceLife').getContext('2d');
window.myObjBar2 = new Chart(context).Bar(barChartData2, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 10,
scaleStartValue : 0,
barShowStroke: false,
barStrokeWidth : 0,
barValueSpacing : 2,
customTooltips: function (tooltip) {
var tooltipEl = $('#chartjs-tooltip');
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var re = new RegExp('\b', 'g');
var innerHtml = '<span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html(innerHtml);
tooltipEl.css({
opacity: 1,
// the minimum amount is half the maximum width of the tooltip that we set in CSS ...
// ... + the x scale padding so that it's not right at the edge
left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
},
animation: false,
responsive: true,
tooltipTemplate: "<%if (label){%><%=value%>: <%}%><%= label.long %>",
maintainAspectRatio: true,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
var bars = myObjBar2.datasets[0].bars;
for(i=0;i<bars.length;i++){
var color="#07c602";
//You can check for bars[i].value and put your conditions here
if(bars[i].value<11){
color="#07c602"
}
else if(bars[i].value<21){
color="#61e738"
}
else if(bars[i].value<31){
color="#b6f277"
}
else if(bars[i].value<41){
color="#ffffb2"
}
else if(bars[i].value<51){
color="#fed976"
}
else if(bars[i].value<61){
color="#feb24c"
}
else if(bars[i].value<71){
color="#fd8d3c"
}
else if(bars[i].value<81){
color="#fc4e2a"
}
else if(bars[i].value<91){
color="#e31a1c"
}
else{
color="#b10026"
}
bars[i].fillColor = color;
}
myObjBar2.update();
功能标签（短、长）{
这个。短=短；
this.long=长
}
Label.prototype.toString=函数（）{
把这个还给我；
}
变量barChartData2={
//标签：bridge_id_grab，
标签：[
新标签（“J”，bridge\u mp\u grab），
新标签（“F”、“FEB”），
新标签（“M”、“MAR”），
新标签（“A”、“APR”），
新标签（“M”、“MAY”），
新标签（“J”、“JUN”），
新标签（“J”、“JUL”）
],
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：[“rgba（2200,0.5）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：桥、年龄、抓斗、，
}
]
}
var context=document.getElementById（'serviceLife'）.getContext（'2d'）；
window.myObjBar2=新图表（上下文）.Bar（barChartData2{
scaleOverride：对，
比例：10，
刻度宽度：10，
scaleStartValue:0，
barShowStroke:错，
barStrokeWidth:0，
barValueSpacing:2，
自定义工具提示：函数（工具提示）{
var tooltipEl=$（“#chartjs工具提示”）；
如果（！工具提示）{
工具管道({
不透明度：0
});
返回；
}
//拆分标签和值，并在此处创建自己的工具提示
var parts=tooltip.text.split（“：”）；
var re=new RegExp（'\b'，g'）；
var innerHtml=''+部分[1].trim（）+''；
html（innerHtml）；
工具管道({
不透明度：1，
//最小值是我们在CSS中设置的工具提示最大宽度的一半。。。
//…+x刻度填充，使其不在边缘
左：Math.max（75+10，tooltip.chart.canvas.offsetLeft+tooltip.x）+“px”，
顶部：tooltip.chart.canvas.offsetTop+tooltip.y+'px'，
fontFamily:tooltip.fontFamily，
fontSize:tooltip.fontSize，
fontStyle:tooltip.fontStyle，
});
},
动画：错，
回答：是的，
ToolTiptTemplate:“：”，
维护Aspectratio：是的，
onAnimationComplete:函数（）{
var ctx=this.chart.ctx；
ctx.font=this.scale.font；
ctx.fillStyle=this.scale.textColor
ctx.textAlign=“中心”；
ctx.textb基线=“底部”；
this.datasets.forEach（函数（数据集）{
dataset.bar.forEach（函数（bar）{
填充文本（bar.value，bar.x，bar.y-5）；
});
})
}
});
var bars=myObjBar2.数据集[0]。bars；
对于（i=0；i我不能100%确定所需的输出，但这是我的目标
简言之，当您定义自己的customTooltips
时，您将覆盖选项中规定的默认tooltipTemplate
因此，删除customTooltips
并为模板定义输出格式可以产生（我认为）所需的结果
然而，为了整齐地完成输出，我添加了一个名为DataPoint
的新对象，并定义如下：
function DataPoint(id, age, milepost) {
this.id = id;
this.age = age;
this.milepost = milepost;
this.tooltip = "Bridge ID:" + id + ", Bridge Age: " + age +", Milepost: " + milepost;
}
DataPoint.prototype.toString = function () {
return this.id;
};
这允许我将所有必要的数据位包含到一个对象中（然后我只操作这些数据位的一个数组，而不是多个数组）
然后，将对象数组设置为表的标签
var barChartData2 = {
labels: bridgeDataPoints, /* this is the array of DataPoints */
datasets: [{
fillColor: ["rgba(220,220,220,0.5)"],
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: bridge_age_grab,
}]
};
最后，tooltipTemplate
的定义如下：
旧版本（v3之前）
tooltipTemplate:，
更新：ChartJS v3新增
把它放在选项对象中
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
// console.log(tooltipItem);
// return 'id: ' + tooltipItem.xLabel.id+' | '+' age: '+tooltipItem.xLabel.age;
},
title: function(tooltipItem, data) {
// return 'Date: ' + tooltipItem[0].xLabel.date;
return 'id: ' + tooltipItem[0].xLabel.id+'\nage: ' + tooltipItem[0].xLabel.age;
}
}
}
// try out your combinations
}
这意味着，如果每个元素都有标签，则显示该元素的工具提示
属性。因为我们将数据点
元素的工具提示
属性定义为
this.tooltip=“桥ID:+ID+”，桥龄：+Age+”，里程标：+Milepost；
获得所需的输出
让我知道这是否有帮助
查看你能为我们制作一把小提琴吗？抱歉耽搁了-我有一大堆事情要做才能让它在小提琴上工作：抱歉耽搁了…工作忙了…有很多问题