[javascript] Chart.js를 사용하여 도넛 차트 내부에 텍스트를 추가하는 방법은 무엇입니까?

다른 답변은 텍스트 양과 도넛 크기에 따라 텍스트 크기를 조정하지 않습니다. 다음은 중간에 임의의 양의 텍스트를 동적으로 배치하는 데 사용할 수있는 작은 스크립트이며 자동으로 크기가 조정됩니다.

예 : http://jsfiddle.net/kdvuxbtj/

도넛에 딱 맞는 크기의 도넛에 텍스트 양이 필요합니다. 가장자리에 닿지 않도록 원 안쪽 지름의 백분율로 측면 패딩을 설정할 수 있습니다. 설정하지 않으면 기본값은 20입니다. 색상, 글꼴 및 텍스트도 있습니다. 플러그인이 나머지를 처리합니다.

플러그인 코드는 30px의 기본 글꼴 크기로 시작합니다. 거기에서 텍스트의 너비를 확인하고 원의 반경과 비교하고 원 / 텍스트 너비 비율에 따라 크기를 조정합니다.

기본 최소 글꼴 크기는 20px입니다. 텍스트가 최소 글꼴 크기에서 경계를 초과하면 텍스트를 래핑합니다. 텍스트 줄 바꿈시 기본 줄 높이는 25px이지만 변경할 수 있습니다. 기본 최소 글꼴 크기를 false로 설정하면 텍스트가 무한히 작아지고 줄 바꿈되지 않습니다.

또한 텍스트가 충분하지 않고 글자가 너무 큰 경우 기본 최대 글꼴 크기는 75px입니다.

이것은 플러그인 코드입니다

Chart.pluginService.register({
  beforeDraw: function(chart) {
    if (chart.config.options.elements.center) {
      // Get ctx from string
      var ctx = chart.chart.ctx;

      // Get options from the center object in options
      var centerConfig = chart.config.options.elements.center;
      var fontStyle = centerConfig.fontStyle || 'Arial';
      var txt = centerConfig.text;
      var color = centerConfig.color || '#000';
      var maxFontSize = centerConfig.maxFontSize || 75;
      var sidePadding = centerConfig.sidePadding || 20;
      var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
      // Start with a base font of 30px
      ctx.font = "30px " + fontStyle;

      // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
      var stringWidth = ctx.measureText(txt).width;
      var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

      // Find out how much the font can grow in width.
      var widthRatio = elementWidth / stringWidth;
      var newFontSize = Math.floor(30 * widthRatio);
      var elementHeight = (chart.innerRadius * 2);

      // Pick a new font size so it will not be larger than the height of label.
      var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
      var minFontSize = centerConfig.minFontSize;
      var lineHeight = centerConfig.lineHeight || 25;
      var wrapText = false;

      if (minFontSize === undefined) {
        minFontSize = 20;
      }

      if (minFontSize && fontSizeToUse < minFontSize) {
        fontSizeToUse = minFontSize;
        wrapText = true;
      }

      // Set font settings to draw it correctly.
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
      var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
      ctx.font = fontSizeToUse + "px " + fontStyle;
      ctx.fillStyle = color;

      if (!wrapText) {
        ctx.fillText(txt, centerX, centerY);
        return;
      }

      var words = txt.split(' ');
      var line = '';
      var lines = [];

      // Break words up into multiple lines if necessary
      for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = ctx.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > elementWidth && n > 0) {
          lines.push(line);
          line = words[n] + ' ';
        } else {
          line = testLine;
        }
      }

      // Move the center up depending on line height and number of lines
      centerY -= (lines.length / 2) * lineHeight;

      for (var n = 0; n < lines.length; n++) {
        ctx.fillText(lines[n], centerX, centerY);
        centerY += lineHeight;
      }
      //Draw text in center
      ctx.fillText(line, centerX, centerY);
    }
  }
});

그리고 차트 개체에서 다음 옵션을 사용합니다.

options: {
  elements: {
    center: {
      text: 'Red is 2/3 the total numbers',
      color: '#FF6384', // Default is #000000
      fontStyle: 'Arial', // Default is Arial
      sidePadding: 20, // Default is 20 (as a percentage)
      minFontSize: 20, // Default is 20 (in px), set to false and text will not wrap.
      lineHeight: 25 // Default is 25 (in px), used for when text wraps
    }
  }
}

이 솔루션에 사용 된 수학에 도움 을 주신 @Jenna Sloan 에게 감사드립니다 .