如何更改Angular Chart.js上的工具提示

Question

所以,我在离子应用程序上使用angular-chart-js插件(不确定是否相关).

使用线性图表,默认情况下,当点击一个点时,我得到一个工具提示,如下所示:

我想改变工具提示的内部,我在谷歌上找不到任何东西.

任何帮助表示赞赏

Answer 1

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

$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.

Answer 2

这是一个笨蛋。用于演示目的。消息是this is a tooltip

注意：您必须为data图表用来绘制的完整数组对象创建工具提示。

我希望它能解决您的问题。