Question

Chart JS工具提示有问题。想要创建两种不同颜色的自定义标签。

tooltips: {
  titleFontColor: '#434343',
  bodyFontColor: '#434343',
  footerFontColor: '#02cbff',
  backgroundColor: 'rgba(255,255,255,1)',
  caretPadding: 5,
  displayColors: false,
  intersect: true,
  callbacks: {
    title: function() {},
    label: function(tooltipItem, data) {
      var label = data.labels[tooltipItem.index];
      var datasetLabel = '$' + tooltipItem.yLabel;
      return label + ' ' + datasetLabel;
    }
  }
}

＆＃34;标签＆＃34;必须有红色
＆＃34; datasetLabel必须有绿色

工具提示需要这样的结果

Answer 1

所以你想要工具提示是自定义的。实际上，chartjs文档本身非常适合设计自己的自定义工具提示。您可以在其中看到here和here。此外，您还可以使用此设置全局chartjs工具提示选项。

Chart.defaults.global = {

// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,

// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// 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",

// 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: "<%= value %>",

// Function - Will fire on animation progression.
onAnimationProgress: function(){},

// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}

此post最能说明您的需求。感谢Suganth的回答。

Answer 2

找到方法how to this。我已经创建了单独的样式。现在它看起来很好，这就是我需要的。

tooltips: {
    enabled: false,
    intersect: true,
    custom: function(tooltipModel) {
      // Tooltip Element
      var tooltipEl = document.getElementById('chartjs-tooltip');

      // Create element on first render
      if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        tooltipEl.innerHTML = "<div></div>";
        document.body.appendChild(tooltipEl);
      }

      // Hide if no tooltip
      if (tooltipModel.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
      }

      // Set caret Position
      tooltipEl.classList.remove('above', 'below', 'no-transform');
      if (tooltipModel.yAlign) {
        tooltipEl.classList.add(tooltipModel.yAlign);
      } else {
        tooltipEl.classList.add('no-transform');
      }

      function getBody(bodyItem) {
        return bodyItem.lines;
      }

      // Set Text
      if (tooltipModel.body) {
        var titleLines = tooltipModel.title || [];
        var bodyLines = tooltipModel.body.map(getBody);
        var innerHtml = '<p class="custom-tooltip">';

        titleLines.forEach(function(title) {
          innerHtml += '<span class="custom-tooltip_xAxis">' + title + ":" + '</span>';
        });

        bodyLines.forEach(function(body, i) {
          innerHtml += '<span class="custom-tooltip_yAxis">' + '$' + body + '</span>';
        });
        innerHtml += '</p>';
        tooltipEl.innerHTML = innerHtml;
      }

      // `this` will be the overall tooltip
      var position = this._chart.canvas.getBoundingClientRect();

      // Display, position, and set styles for font
      tooltipEl.style.opacity = 1;
      tooltipEl.style.top = position.top + tooltipModel.caretY + 20 + 'px';
      tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
    }

Chart JS工具提示标签的不同颜色

2 个答案: