在圓環圖中的es6中添加新行

我正在使用chartjs，並且我添加了用於在此圖表內添加文本的插件。我的問題是，當我定義這樣的文本：文本：${sectorsCounter}\ Sectors它沒有顯示sectorCounter下的扇區。我期望的輸出是這樣的：在圓環圖中的es6中添加新行

我用於添加文本的插件：

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(); 
    } 
    }, 
});

當我圓環圖的調用是：

<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, 
      } 
      },

來源

2017-04-25 user7334203

嗯，我看你還沒有找到你想要的解決方案。所以，這裏的解決方案......

添加以下代碼後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);

來源

2017-04-25 14:58:51

它沒有工作：（ – user7334203

恐怕這是一個bug插件:( – user7334203

@ user7334203 hm ..查看編輯答案 –

見Escape notation：

let stringTemplateA = `-a 
 
a-`; 
 

 
let stringTemplateB = `-b\r\nb-`; 
 

 
console.log(stringTemplateA); 
 
console.log(stringTemplateB);

來源

2017-04-25 17:02:12 mikeapr4

我會接受它作爲一個asnwer！但我不知道它是否適用於我的情況。我認爲這個插件有一個bug – user7334203

看來你的問題與ES6換行符沒有關係，請看這裏 - http://stackoverflow.com/questions/5026961/html5-canvas-ctx-filltext-wont-do-line-休息 - @ gaand的答案是您需要的解決方案 – mikeapr4

在圓環圖中的es6中添加新行

回答

相關問題