如何更改 Angular Chart.js 上的工具提示 [英] How to change tooltip on Angular Chart.js

问题描述

所以，我在 ionic 上使用 angular-chart-js 插件应用(不确定是否相关).

So, I'm using angular-chart-js plugin on an ionic app (Not sure if that relevant).

对于线性图表，默认情况下，当单击一个点时，我会得到如下所示的工具提示:

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.

感谢任何帮助

推荐答案

在您可以为图表指定的图表选项中，您可以创建一个函数来返回工具提示的模板.

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;
    }
}

在您看来:

<canvas id="" class="chart chart-bar" legend="true"
              series="bar_series" colours="colors"
              data="bar_data" labels="bar_labels"               
              options="chart_options">

标签对象看起来像

label = {value: 55, label: "8/18 - 8/24", datasetLabel: "Foo", 
         strokeColor: "rgba(178,145,47,1)", fillColor: "rgba(178,145,47,0.2)"…}

multiTooltipTemplate 用于条形、线形等，其中每个 x 轴值都有多个数据点.对于馅饼或甜甜圈，您只需使用 tooltipTemplate.

The multiTooltipTemplate is used for bar, line, etc, where you have multiple data points for each x axis value. For pie or doughnut, you would just use tooltipTemplate.

这篇关于如何更改 Angular Chart.js 上的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！