Cách thay đổi chú giải công cụ trên Angular Chart.js

Question

Vì vậy, tôi đang sử dụng angular-chart-js plugin trên ứng dụng ionic (Không chắc chắn nếu điều đó có liên quan).

Với biểu đồ tuyến tính, theo mặc định, khi nhấp vào một dấu chấm tôi nhận được một tooltip như:

Và tôi muốn thay đổi bên trong tooltip đó, tôi không thể tìm thấy bất cứ điều gì trên google.

Bất kỳ trợ giúp nào được đánh giá cao

Answer 1

Đây là Plunker. Cho mục đích demo. tin nhắn là this is a tooltip

Lưu ý: Bạn sẽ phải tạo đầu công cụ cho đối tượng mảng hoàn chỉnh data được biểu đồ sử dụng để vẽ đồ thị.

Tôi hy vọng nó sẽ giải quyết được vấn đề của bạn.

Answer 2

Trong tùy chọn biểu đồ bạn có thể chỉ định cho biểu đồ, bạn có thể tạo hàm để trả về mẫu cho chú giải công cụ.

$scope.chart_options = { 
    multiTooltipTemplate: function(label) { 
     return label.label + ': ' + label.value; 
    } 
} 

và theo quan điểm của bạn:

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

Đối tượng nhãn trông giống như

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

Edit: Các multiTooltipTemplate được sử dụng cho bar, dòng, vv, nơi bạn có nhiều điểm dữ liệu cho mỗi giá trị trục x. Đối với bánh hoặc bánh rán, bạn chỉ cần sử dụng tooltipTemplate.

Answer 3

Tôi biết đây là câu hỏi cũ nhưng chỉ dành cho bất kỳ ai khác tìm kiếm điều này - có một cách đơn giản hơn để tùy chỉnh chú giải công cụ trên toàn cầu.

Trong mô-đun của bạn:

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

Có những lựa chọn khác để tùy chỉnh các tooltips và gần như mọi thứ khác trên toàn cầu

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