как выровнять диаграммы пули при использовании диаграммы слияния

Question

Я использую диаграмму слияния для рендеринга нескольких диаграмм пули. Но они не выравниваются должным образом, поскольку метки разных диаграмм имеют разную длину. Есть ли способ заставить диаграммы выглядеть согласованными?

jsfiddle example

Answer 1

Я пытался найти решение, предоставленную FusionCharts, но я ничего не нашел. Единственное, что я могу вам предложить, - попробовать обходной путь, установив шрифт с фиксированной шириной и добавить одинаковое количество символов на любую метку (а не пробелы, потому что подписи будут обрезаны). Это приносит много проблем, если заголовок первого графика и подзапись второго графика являются самыми длинными, не будут работать, потому что шрифт не является тем же. Другая проблема заключается в необходимости использования символа dot вместо пространства.

Однако, это пример, чтобы дать вам возможный путь, не очень элегантный, но это возможность, надеюсь, вы поможете.

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