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

Question

所以，我在 ionic 應用程序上使用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

我知道這是一個老問題，但僅適用於尋找此問題的其他人 - 有一種更簡單的方法可以在全局范圍內自定義工具提示。

在您的模塊中：

myApp.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions({
    tooltipFillColor: '#EEE',
    tooltipFontColor: '#000',
    tooltipFontSize: 12,
    tooltipCornerRadius: 3
});

還有其他選項可以自定義工具提示和全局幾乎所有其他內容

            // 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(){}

Answer 3

好吧，我需要更改我的工具提示，使它們具有各自標簽的相同內容，但有一個細節：即使標簽隱藏在圖表中，也要這樣做。 像這樣：

上圖顯示了時間間隔為 20 分鍾的圖表TIME x VALUE 。 也就是說，我希望tooltips有各自的標簽值（例如：在圖像上，我把鼠標放在時間18:10對應的值，間隔的一半）。

我需要做的就是：

1.在我的類中創建一個靜態數組（懶惰的方法，使其更易於訪問）

public static arrayTooltip = [];

2. 初始化它並用標簽的正確值填充它

3.我隱藏了我想隱藏的標簽（不用擔心...由於第2步，數據是安全的）

然后，在圖表選項中，我做了這樣的事情：

tooltips: {
    enabled: true, 
    displayColors: false,
    xPadding: 15,
    yPadding: 15,

    callbacks: {
        title: function(tooltipItem, data) {
            return "";
        },

        label: function(tooltipItem, data) {
            return MyClassComponent.arrayTooltip[tooltipItem.index]
        }
    }

  },

在上面的代碼中，將注意力集中在回調上。 我不想要標題，所以我把它留空了。 關於標簽，我獲取了當前工具提示的索引（鼠標瞄准的那個）並在靜態數組中使用它。 它完成了。

Answer 4

這是一個Plunker 。 用於演示目的。 消息是this is a tooltip

注意：您必須為圖表用於繪制的完整數組對象data創建工具提示。

我希望它能解決你的問題。