如何改变角度chart.js之提示 [英] How to change tooltip on Angular Chart.js

问题描述

所以，我使用角图-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.

任何帮助是pciated AP $ P $

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

和在您的视图：

<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)"…}

编辑： 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.

这篇关于如何改变角度chart.js之提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！