使用fusioncharts时如何对齐子弹图答案

【问题标题】：how to align bullet charts when using fusion chart使用fusioncharts时如何对齐子弹图
【发布时间】：2016-04-12 08:11:06
【问题描述】：

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

jsfiddle example

【问题讨论】：

这是一个快速的fix

标签： javascript fusioncharts

【解决方案1】：

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

不过，这是一个例子，给你一个可能的方式，不是很优雅，但它是一种可能，希望对你有所帮助。

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

【讨论】：

【解决方案2】：

更好的解决方案是调整与带有空格字符 \u00A0 的项目符号列表不同的字符空格数。例如。

    "caption": "BAU\u00A0>",

    "caption": "A1\u00A0\u00A0\u00A0>",

    "caption": "BAK1>",

这样，您只需对齐子弹图的开头。

JsFiddle

JSFiddle2

【讨论】：