Question

我正在使用chartjs，我添加了用于在此图表中添加文本的插件。我的问题是，当我定义这样的文字时： text：${sectorsCounter}\ Sectors它没有显示sectorCounter下的Sectors。我想要的输出是这样的：

我用来添加文字的插件是：

Chart.pluginService.register({
  afterUpdate(chart) {
    let helpers;
    let centerConfig;
    let globalConfig;
    let ctx;
    let fontStyle;
    let fontFamily;
    let fontSize;
    if (chart.config.options.elements.center) {
      helpers = Chart.helpers;
      centerConfig = chart.config.options.elements.center;
      globalConfig = Chart.defaults.global;
      ctx = chart.chart.ctx;

      fontStyle = helpers.getValueOrDefault(
        centerConfig.fontStyle, globalConfig.defaultFontStyle
      );
      fontFamily = helpers.getValueOrDefault(
        centerConfig.fontFamily, globalConfig.defaultFontFamily
      );

      if (centerConfig.fontSize) {
        fontSize = centerConfig.fontSize;
      } else {
        ctx.save();
        fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);

        ctx.restore();
      }
      const newChart = chart;
      newChart.center = {
        font: helpers.fontString(fontSize, fontStyle, fontFamily),
        fillStyle: helpers.getValueOrDefault(
            centerConfig.fontColor, globalConfig.defaultFontColor
          )
      };
    }
  },
  afterDraw(chart) {
    if (chart.center) {
      const centerConfig = chart.config.options.elements.center;
      const ctx = chart.chart.ctx;

      ctx.save();
      ctx.font = chart.center.font;
      ctx.fillStyle = chart.center.fillStyle;
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
      const centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;
      ctx.fillText(centerConfig.text, centerX, centerY);
      ctx.restore();
    }
  },
});

当我对Donut图表的调用是：

<Doughnut
        data={sectorsData}
        width={250}
        height={250}
        options={{
          legend: {
            display: false
          },
          maintainAspectRatio: false,
          responsive: true,
          cutoutPercentage: 75,
          elements: {
            center: {
              text: `${sectorsCounter}\ Sectors`,
              fontColor: '#000000',
              fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
              fontStyle: 'normal',
              minFontSize: 25,
              maxFontSize: 25,
            }
          },

Answer 1

好吧，我发现你还没有找到你想要的解决方案。所以，这是解决方案......

在 const centerY = (chart.chartArea.top + chart.chartArea.bottom)/2 之后添加以下代码在你的插件中

let helpers = Chart.helpers;
let fontSize = helpers.getValueOrDefault(centerConfig.minFontSize, 1);
let text = centerConfig.text.split('\ ');
ctx.fillText(text[0], centerX, centerY - fontSize / 2);
ctx.fillText(text[1], centerX, centerY + fontSize / 2);

Answer 2

请参阅Escape notation：

＆＃13;

let stringTemplateA = `-a
a-`;

let stringTemplateB = `-b\r\nb-`;

console.log(stringTemplateA);
console.log(stringTemplateB);

＆＃13;

在圆环图中的es6中添加新行

2 个答案: