javascript - 使用融合图表时如何对齐子弹图

Question

我正在使用融合图表来渲染多个项目符号图表。但它们无法正确对齐，因为不同图表的标签长度​​不同。有没有办法让图表看起来一致？

jsfiddle example

Answer 1

我尝试寻找 FusionCharts 提供的解决方案，但一无所获。我唯一可以向您建议的方法是通过设置固定宽度字体来尝试解决方法，并在任何标签上添加相同数量的字符(不是空格，因为标题将被 trim )。这就带来了很多问题，如果第一张图的标题和第二张图的副标题最长的话，是不行的，因为字体不一样。另一个问题是需要使用点字符而不是空格。

但是，这是一个示例，为您提供一种可能的方式，不是很优雅，但它是一种可能性，希望您有所帮助。

http://jsfiddle.net/4af60nrw/1/

var caption1 = "Last Month Revenue";
var subCaption1 = "Actual vs Target";

var caption2 = "Last Month Revenue Test Larger Label";
var subCaption2 = "Actual vs Target";

caption1 = sameChar(caption1, caption2);
caption2 = sameChar(caption2, caption1);

subCaption1 = sameChar(subCaption1, subCaption2);
subCaption2 = sameChar(subCaption2, subCaption1);

function sameChar(txt1, txt2) {
    txt1 = txt1 + '.'.repeat(txt2.length-txt1.length);
  return txt1;
}

...

var revBulletChart = new FusionCharts({
.
.
.
    "caption": caption1,
    "subcaption": subCaption1,
.
.
.
var revBulletChart = new FusionCharts({
.
.
.
    "caption": caption2,
    "subcaption": subCaption2,
.
.
.