我正在尝试使用Chart.Js构建图表。这个chart.js有工具提示的默认选项，我想制作自定义的工具提示选项。有没有办法让它成为可能？
这是我的代码
var chart = null;
barChart: function (data1, data2, data3, label) {
var data = {
labels: label,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data1
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: data2
},
{
fillColor: "rgba(0,255,0,0.3)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(0,255,0,0.3)",
data: data3
},
]
}
var cht = document.getElementById('exampleCanvas');
var ctx = cht.getContext('2d');
if (chart)
chart.destroy();
chart = new Chart(ctx).Bar(data);
}
答案 0 :(得分：9)
试试这个：
您可以使用以下代码进行全局更改：
Chart.defaults.global = {
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
// String - Template string for single tooltips
multiTooltipTemplate: "<%= value %>",
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}
使用此Link作为参考
答案 1 :(得分：5)
我已经使用了这个，我已经在stackoverflow上找到了它，但我很难再找到它
<div id="chartjs-tooltip"></div>
var chartoptions =
{
customTooltips: function ( tooltip )
{
var tooltipEl = $( "#chartjs-tooltip" );
if ( !tooltip )
{
tooltipEl.css( {
opacity: 0
} );
return;
}
tooltipEl.removeClass( 'above below' );
tooltipEl.addClass( tooltip.yAlign );
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split( ":" );
var innerHtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipEl.html( innerHtml );
tooltipEl.css( {
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle
} );
}
}
链接到我得到的地方：{{3}}
答案 2 :(得分：4)
当您知道将选项放在何处时，这非常简单。
答案是在创建图表时添加自定义选项：
chart = new Chart(ctx).Bar(data, {"options goes here"} );
使用数据信息传递数据变量后，您可以添加自定义选项，例如，您想要更改工具提示标题的大小，并且还要在工具提示的标题中添加浅灰色你会做那样的事情：
chart = new Chart(ctx).Bar(data, {
//Option for title font size in pixels
tooltipTitleFontSize: 14,
//Option for tooltip title color
tooltipTitleFontColor: "#eee",
}）;
您可以采取的另一种方法是创建一组选项作为变量用于组织目的，并且能够重复使用它。
//Create a set of relevant options for you chart
var myoptions = {
scaleShowGridLines : false,
responsive : true,
scaleFontSize: 12,
pointDotRadius : 4,
scaleFontStyle: 14,
scaleLabel: "<%= ' ' + value%> %",
}
//Create the Chart
chart = new Chart(ctx).Bar(data, myoptions);
我希望现在很清楚
此致
答案 3 :(得分：4)
新版本的chart.js，版本2，可在此处找到：
https://github.com/nnnick/Chart.js/releases
版本2添加了tooltip callbacks：
每个工具提示回调（beforeTitle，title，afterTitle等）都接受字符串或数组。如果使用数组，它将产生多行。工具提示现在还提供了更多可视化定制选项。
然而，有一个chart.js的分支，名为chartNew.js，在这里找到：
https://github.com/FVANCOP/ChartNew.js/
它为古老的chart.js增加了几项重要的增强功能，包括：
工具提示功能（下载/解压缩时，请查看Samples文件夹并查看annotateFunction.html。当鼠标悬停在任意点上时，您可以执行任何操作。）
将一系列颜色传递给条形图（而不是每个具有相同颜色的系列条）
将图表放在图表上的任何地方
许多etceteras。
请注意，map.js在版本2中得到了极大的增强，但是新版本并没有完全向后兼容（只是更改为v2插件破坏了我现有的代码），而chartNew.js将在扩展功能的同时使用旧代码。
答案 4 :(得分：4)
您可以查看工具提示css - http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration
tooltips:
{
bodyFontColor: "#000000", //#000000
bodyFontSize: 50,
bodyFontStyle: "bold",
bodyFontColor: '#FFFFFF',
bodyFontFamily: "'Helvetica', 'Arial', sans-serif",
footerFontSize: 50,
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if(tooltipItem.index == 0) {
return "<?php echo $data1;?>";
}
else if(tooltipItem.index == 1) {
return "<?php echo $data2;?>";
}
else if(tooltipItem.index == 2) {
return "<?php echo $data3;?>";
}
else {
return "<?php echo $data4; ?>";
}
},
},
},
答案 5 :(得分：1)
我发现这个页面很有用：
https://github.com/nnnick/Chart.js/blob/master/samples/pie-customTooltips.html
他展示了为自定义工具提示定义函数的位置和方式，以及样式的示例。 我不得不修改代码以满足我的需求，但这是如何实现自定义工具提示功能的一个很好的例子。
有些注意事项让我一开始就放弃了：
1）需要修改样式规则中的id以匹配您的工具提示div。 （这很明显，但我最初没有抓住它）
2）tooltip.text将遵循您在选项中为'tooltipTemplate'设置的格式，或者在chart.js中设置的默认tooltipTemplate
答案 6 :(得分：-1)
可能这可以帮到你
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var xLabels = this.scale.xLabels
xLabels.forEach(function (label, i) {
if (i % 2 == 1)
xLabels[i] = label.substring(1, 4);
})
}
});
var data = {
labels: ["1/jan/08", "15/fab/08", "1/mar/08", "1/apr/08", "10/apr/08", "10/may/2008", "1/jun/2008"],
datasets: [{
label: "First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,20,20,1)",
pointColor: "rgba(220,20,20,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 90]
}, {
label: "Third dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(15,187,25,1)",
pointColor: "rgba(15,187,25,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [38, 55, 50, 65, 35, 67, 54]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).LineAlt(data);
// Chart.js replaces the base inRange function for Line points with a function that checks only the x coordinate
// we replace it with the original inRange fucntion (one that checks both x and y coordinates)
myChart.datasets.forEach(function(dataset) {
dataset.points.forEach(function(point) {
point.inRange = Chart.Point.prototype.inRange;
});
});
// Chart.js shows a multiTooltip based on the index if it detects that there are more than one datasets
// we override it to show a single tooltip for the inRange element
myChart.showTooltip = function(ChartElements, forceRedraw) {
// this clears out the existing canvas - the actual Chart.js library code is a bit more optimized with checks for whether active points have changed, etc.
this.draw();
// draw tooltip for active elements (if there is one)
Chart.helpers.each(ChartElements, function(Element) {
var tooltipPosition = Element.tooltipPosition();
new Chart.Tooltip({
x: Math.round(tooltipPosition.x),
y: Math.round(tooltipPosition.y),
xPadding: this.options.tooltipXPadding,
yPadding: this.options.tooltipYPadding,
fillColor: this.options.tooltipFillColor,
textColor: this.options.tooltipFontColor,
fontFamily: this.options.tooltipFontFamily,
fontStyle: this.options.tooltipFontStyle,
fontSize: this.options.tooltipFontSize,
caretHeight: this.options.tooltipCaretSize,
cornerRadius: this.options.tooltipCornerRadius,
text: Chart.helpers.template(this.options.tooltipTemplate, Element),
chart: this.chart,
custom: this.options.customTooltips
}).draw();
}, this);
};