几乎在任何时候,如果你想要个性化定制 tooltip 的外观和样式超出了 chart.js 提供的配置选项,你都需要使用
自定义 tooltip。自定义 tooltip 的好处是它们基于 html/css,因此您的样式选项是无限的。
在这种情况下,由于您正在尝试根据数据值更改 tooltip 的背景颜色,因此您可以简单地定义一些 css 类来处理两种样式选项,然后在自定义 tooltip 函数中实现逻辑以根据值分配适当的 css 类。
以下是一个例子。
custom: function(tooltip) {
var tooltipEl = document.getElementById('chartjs-tooltip');
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>"
document.body.appendChild(tooltipEl);
}
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
$(this._chart.canvas).css("cursor", "default");
return;
} else {
$(this._chart.canvas).css("cursor", "pointer");
}
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;
}
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) {
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;
}
var position = this._chart.canvas.getBoundingClientRect();
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';
}
似乎您想根据数据值自定义点的颜色。这实际上非常简单,不需要使用任何回调函数。您只需将颜色数组传递给 pointBackgroundColor 和 pointBorderColor 属性,其中数组中的每个索引都映射到数据数组中的索引。
例如,如果您想让第一个和第三个点具有不同的颜色,则数组可能如下所示:[蓝色,红色,蓝色,红色]。您可以在构建图表数据对象时(例如,在 prepareDataForChart() 函数中)同时构建颜色数组。
以下是示例:
var prepareDataForChart = function(data) {
var chartData = {
data: [],
pointColors: [],
};
data.forEach(function(d) {
var yValue;
var pointColor;
if (d.eventState === 'A') {
yValue = 2;
pointColor = chartColors.red;
} else if (d.eventState === 'N') {
yValue = 1;
pointColor = chartColors.blue;
}
chartData.data.push({
x: d.eventTime,
y: yValue,
});
chartData.pointColors.push(pointColor);
});
return chartData;
};
然后当您创建图表时,只需使用由您的函数返回的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,
}]
},
这里有一个
CodePen示例,演示了所有讨论过的内容(彩色工具提示和点)。