Question

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

jsfiddle example

Answer 1

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

然而，这是一个给你一个可能的方式的例子，不是很优雅，但这是一种可能性，我希望你能帮忙。

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

Answer 2

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

    "caption": "BAU\u00A0>",

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

    "caption": "BAK1>",

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

JsFiddle

JSFiddle2

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

2 个答案: