[英]How to change tooltip on Angular Chart.js
So, I'm using angular-chart-js plugin on an ionic app (Not sure if that relevant).所以,我在 ionic 应用程序上使用angular-chart-js插件(不确定是否相关)。
With linear chart, by default, when clicking on a dot I get a tooltip as shown:使用线性图表,默认情况下,当单击一个点时,我会得到如下所示的工具提示:
And I want to change the inside of that tooltip, I couldn't find anything on google.我想改变那个工具提示的内部,我在谷歌上找不到任何东西。
Any help is appreciated任何帮助表示赞赏
In the chart options you can specify for a chart, you can create a function to return a template for the tooltip.在您可以为图表指定的图表选项中,您可以创建一个函数来返回工具提示的模板。
$scope.chart_options = {
multiTooltipTemplate: function(label) {
return label.label + ': ' + label.value;
}
}
and in your view:在您看来:
<canvas id="" class="chart chart-bar" legend="true"
series="bar_series" colours="colors"
data="bar_data" labels="bar_labels"
options="chart_options">
The label object looks like标签对象看起来像
label = {value: 55, label: "8/18 - 8/24", datasetLabel: "Foo",
strokeColor: "rgba(178,145,47,1)", fillColor: "rgba(178,145,47,0.2)"…}
Edit: The multiTooltipTemplate
is used for bar, line, etc, where you have multiple data points for each x axis value.编辑:
multiTooltipTemplate
用于条形、线条等,其中每个 x 轴值都有多个数据点。 For pie or doughnut, you would just use tooltipTemplate
.对于馅饼或甜甜圈,您只需使用
tooltipTemplate
。
I know this is an old question but just for anyone else looking for this - there is a simpler way to customize the tooltips globally.我知道这是一个老问题,但仅适用于寻找此问题的其他人 - 有一种更简单的方法可以在全局范围内自定义工具提示。
In your module:在您的模块中:
myApp.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions({
tooltipFillColor: '#EEE',
tooltipFontColor: '#000',
tooltipFontSize: 12,
tooltipCornerRadius: 3
});
There are other options to customize the tooltips and almost everything else globally还有其他选项可以自定义工具提示和全局几乎所有其他内容
// Boolean - Whether to animate the chart
animation: true,
// Number - Number of animation steps
animationSteps: 60,
// String - Animation easing effect
animationEasing: "easeOutQuart",
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - If we want to override with a hard coded scale
scaleOverride: false,
// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded scale
scaleSteps: null,
// Number - The value jump in the hard coded scale
scaleStepWidth: null,
// Number - The scale starting value
scaleStartValue: null,
// String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
// Number - Pixel width of the scale line
scaleLineWidth: 1,
// Boolean - Whether to show labels on the scale
scaleShowLabels: true,
// Interpolated JS string - can access value
scaleLabel: "<%=value%>",
// Boolean - Whether the scale should stick to integers, and not show any floats even if drawing space is there
scaleIntegersOnly: true,
// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: false,
// String - Scale label font declaration for the scale label
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Scale label font size in pixels
scaleFontSize: 12,
// String - Scale label font weight style
scaleFontStyle: "normal",
// String - Scale label font colour
scaleFontColor: "#666",
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: false,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
// Boolean - Determines whether to draw tooltips on the canvas or not - attaches events to touchmove & mousemove
showTooltips: true,
// Boolean - Determines whether to draw built-in tooltip or call custom tooltip function
customTooltips: false,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
// 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",
// String - Tooltip title template
tooltipTitleTemplate: "<%= label%>",
// 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: "<%= datasetLabel %>: <%= value %>",
// String - Colour behind the legend colour block
multiTooltipKeyBackground: '#fff',
// Array - A list of colors to use as the defaults
segmentColorDefault: ["#A6CEE3", "#1F78B4", "#B2DF8A", "#33A02C", "#FB9A99", "#E31A1C", "#FDBF6F", "#FF7F00", "#CAB2D6", "#6A3D9A", "#B4B482", "#B15928" ],
// Array - A list of highlight colors to use as the defaults
segmentHighlightColorDefaults: [ "#CEF6FF", "#47A0DC", "#DAFFB2", "#5BC854", "#FFC2C1", "#FF4244", "#FFE797", "#FFA728", "#F2DAFE", "#9265C2", "#DCDCAA", "#D98150" ],
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
Well, I needed to change my tooltips to make them have the same content of their respective labels, BUT with a detail: make it even if the labels are hidden in the chart.好吧,我需要更改我的工具提示,使它们具有各自标签的相同内容,但有一个细节:即使标签隐藏在图表中,也要这样做。 Like this:
像这样:
This image above shows a chart TIME x VALUE where the interval of time is 20 minutes.上图显示了时间间隔为 20 分钟的图表TIME x VALUE 。 That is, I wanted the tooltips to have their respective values of the label (eg: on the image, I put the mouse in the value corresponding to the time 18:10, the half of the interval).
也就是说,我希望tooltips有各自的标签值(例如:在图像上,我把鼠标放在时间18:10对应的值,间隔的一半)。
All I needed to do was:我需要做的就是:
1. Create a static array in my class (lazy way to make it more accessible) 1.在我的类中创建一个静态数组(懒惰的方法,使其更易于访问)
public static arrayTooltip = [];
2. Initialized it and filled it in with the proper values of the labels 2. 初始化它并用标签的正确值填充它
3. I hid the labels I wanted to hide (no worries... data are safe due to step 2) 3.我隐藏了我想隐藏的标签(不用担心...由于第2步,数据是安全的)
And then, in the chart options, I made something like this:然后,在图表选项中,我做了这样的事情:
tooltips: {
enabled: true,
displayColors: false,
xPadding: 15,
yPadding: 15,
callbacks: {
title: function(tooltipItem, data) {
return "";
},
label: function(tooltipItem, data) {
return MyClassComponent.arrayTooltip[tooltipItem.index]
}
}
},
In the code above, keep your focus in the callbacks.在上面的代码中,将注意力集中在回调上。 I didn't want a title, so I made it blank.
我不想要标题,所以我把它留空了。 About the label, I took the index of the current tooltip (the one that is on the aim of the mouse) and used it in the static array.
关于标签,我获取了当前工具提示的索引(鼠标瞄准的那个)并在静态数组中使用它。 And it is done.
它完成了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.