使用融合图时如何对齐项目符号图

how to align bullet charts when using fusion chart

本文关键字：对齐 项目 符号 何对齐 融合      更新时间：2023-09-26

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

jsfiddle example

我试图找到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,
.
.
.

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

    "caption": "BAU'u00A0>",
    "caption": "A1'u00A0'u00A0'u00A0>",
    "caption": "BAK1>",

通过这种方式，您只需对齐项目符号图表的开头。

Js报价

JSFiddle2

相关文章：