Javascript 更改Chart.js中的工具提示颜色
尝试根据数据值自定义工具提示。在折线图的角上也有这些小的圆形连接或连接,当折线上升或下降时,我也试图改变它的颜色,对于那些我甚至不知道从哪里开始的连接。下面是我正在使用的代码的一部分,我试图使用Chart.js返回并更改工具提示的颜色Javascript 更改Chart.js中的工具提示颜色,javascript,jquery,chart.js,Javascript,Jquery,Chart.js,尝试根据数据值自定义工具提示。在折线图的角上也有这些小的圆形连接或连接,当折线上升或下降时,我也试图改变它的颜色,对于那些我甚至不知道从哪里开始的连接。下面是我正在使用的代码的一部分,我试图使用Chart.js返回并更改工具提示的颜色 tooltips: { mode: 'index', intersect: false, callbacks: { label: function(tooltip
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, data) {
if (tooltipItem.yLabel === 1) {
//return 'Normal';
return { 'Normal',
tooltipFillColor: 'rgb(255, 99, 132)', // red
};
} else if (tooltipItem.yLabel === 2) {
// return 'Active';
return { 'Acitve',
tooltipFillColor: 'rgb(75, 192, 192)', // green
};
}
}
}
},
谢谢你的帮助 几乎任何时候,只要您想自定义chart.js提供的配置选项之外的工具提示的外观,就必须使用。自定义工具提示的好处在于它们是基于html/css的,因此样式选项无穷无尽 在这种情况下,由于您试图根据数据的值更改工具提示背景颜色,因此您可以简单地定义一些css类来处理这两个样式选项,然后在自定义工具提示函数中实现逻辑,以根据值指定适当的css类 这里有一个例子
custom: function(tooltip) {
// get the tooltip element
var tooltipEl = document.getElementById('chartjs-tooltip');
// create one if it does not yet exist
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>"
document.body.appendChild(tooltipEl);
}
// hide the tooltip and restore the cursor
// if there isn't one to display yet
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
$(this._chart.canvas).css("cursor", "default");
return;
} else {
// otherwise change the cursor to pointer
$(this._chart.canvas).css("cursor", "pointer");
}
// clear all classes and add the correct background color
tooltipEl.classList.remove('active', 'normal');
if (tooltip.dataPoints[0].yLabel === 2) {
tooltipEl.classList.add('active');
} else {
tooltipEl.classList.add('normal');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// set tooltip text
if (tooltip.body) {
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
// map the number that is going to be displayed state value
if (tooltip.dataPoints[0].yLabel === 2) {
body = 'Active';
} else {
body = 'Normal';
}
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
// get the position of tooltip
var position = this._chart.canvas.getBoundingClientRect();
// set display, position, and font styles
tooltipEl.style.opacity = 1;
tooltipEl.style.left = position.left + tooltip.caretX + 'px';
tooltipEl.style.top = position.top + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._fontFamily;
tooltipEl.style.fontSize = tooltip.fontSize;
tooltipEl.style.fontStyle = tooltip._fontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
}
然后,在创建图表时,只需使用函数返回的pointColors
数组
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Object 1",
fill: false,
borderColor: chartColors.red,
borderWidth: 2,
backgroundColor: chartColors.white,
pointBorderColor: chartData.pointColors,
pointBackgroundColor: chartData.pointColors,
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 20,
steppedLine: true,
data: chartData.data,
}]
},
// ...rest of chart options...
tooltips: {
callbacks: {
labelColor: function(tooltipItem,data) {
if (tooltipItem.datasetIndex === 0) {
return {
borderColor: "#FFFFFF",
backgroundColor: "#FFCD2E"
};
}
下面是一个演示所讨论的所有内容(彩色工具提示和点)。或者,您可以使用标签颜色功能
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Object 1",
fill: false,
borderColor: chartColors.red,
borderWidth: 2,
backgroundColor: chartColors.white,
pointBorderColor: chartData.pointColors,
pointBackgroundColor: chartData.pointColors,
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 20,
steppedLine: true,
data: chartData.data,
}]
},
// ...rest of chart options...
tooltips: {
callbacks: {
labelColor: function(tooltipItem,data) {
if (tooltipItem.datasetIndex === 0) {
return {
borderColor: "#FFFFFF",
backgroundColor: "#FFCD2E"
};
}
我理解关于根据工具提示的值更改其颜色的部分,但是您能否提供一张图片来解释您的意思:“这些小圆形连接件或折线图角上的连接件”?嗨,小圆形连接件,抱歉,可以找到它的正确名称。它们由以下数据集控制:数据集:[{borderJoinStyle:'',pointBorderColor:'#000000',pointBackgroundColor:#ff0000',pointBorderWidth:1,pointHoverRadius:5,}]。它们是我试图根据“d.eventState”的值更改颜色的对象。谢谢请参阅我对我的“答案”的评论以及我的更新答案。嗨,Jordan,我看到您发布的代码与我正在尝试的非常接近,但是如果我可以更改数据集中这四个项目的值:[{pointBorderColor:'#000000',pointBackgroundColor:#ff0000”,pointBorderWidth:1,pointHoverRadius:5,…}]基于“tooltipItem.yLabel”的值,它可以为我实现这个技巧。这就是我试图在“if”语句的“return”中所做的。实际上,您可以通过将数组传递给
pointBackgroundColor
和pointBorderColor
来单独设置点的颜色。请参阅我更新的答案,其中解释了所有这些(我也更新了代码笔)。这很好,比我尝试的方式更简单,创建另一个函数只是为了根据d.eventState的值获取颜色。我发现一个问题,如果我只有一个值,为什么聊天不会显示该值的任何行,只是工具提示显示: