如何在CanvasJS图表中实现索引标签（indexLabel）多行显示？

当然可以实现！CanvasJS支持在indexLabel的文本内容里插入**换行符\n**来实现多行显示，只需要调整你拼接字符串的逻辑就行。

修改后的代码示例 #

把原来的indexLabel拼接部分改成这样：

dp.push({ 
  indexLabel: json[i].count + "\n(" + json[i].sizeText + ")", 
  y: json[i].count, 
  label: json[i].day.split(' ').slice(0,1), 
  day: json[i].day.split(' ')[0], 
  month: m, 
  indexLabelFontColor: 'red', 
  indexLabelBackgroundColor: 'white', 
  count: json[i].count 
});

额外优化说明 #

• 用\n替代原本的空格，就能把10和(50 GB)分成两行显示，这是最直接的原生换行方式
• 如果需要调整行间距或者字体大小，可以额外设置indexLabelFontSize、indexLabelLineHeight这类属性优化显示效果
• 要是你需要更复杂的样式（比如不同行用不同颜色），CanvasJS也支持HTML格式的索引标签：只需在图表配置里开启enableHTML: true，然后把indexLabel改成带<br>的HTML字符串即可：

  // 先在图表配置中开启HTML支持
  var chart = new CanvasJS.Chart("chartContainer", {
    enableHTML: true,
    // 其他图表配置项...
  });
  
  // 用HTML标签实现换行
  indexLabel: json[i].count + "<br>(" + json[i].sizeText + ")"
  

这样就能轻松实现索引标签的多行显示啦！

内容的提问来源于stack exchange，提问作者Snake Eyes