Временно хранит массив невидимых элементов div

Question

Я работаю с FusionCharts, и я использую эти диаграммы ...

1. В JavaScript создается новый график
2. Для создания нового объекта диаграммы необходимо указать идентификатор div
3. моя страница динамически загружает контент с сервера, в то время как пользователь фактически не покидает страницу
4. Fusion Charts не позволяет создавать вторую диаграмму внутри div, в которой уже есть диаграмма
5. С учетом вышесказанного мне нужно предварительно определить каждую возможную диаграмму, даже если ее родительская страница содержимого еще не загружена, и создать ее экземпляр при загрузке страницы.
6. В дальнейшем, для создания этих «объектов» диаграммы, мне нужно уже иметь элемент div, назначенный для каждой конкретной диаграммы, на который ссылается ID.

Вот фрагмент кода:

var Charts = new Array();
function InitCharts() {
    Charts[0] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA1", "340", "340");
    Charts[1] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA2", "340", "340");
    Charts[2] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA3", "340", "340");
}

Теперь вопрос с вышеизложенным состоит в том, как бы я начал создавать элементы div и временно скрывать их, когда они не используются, а затем показывать их внутри надлежащего заполнителя, когда их нужно показать? Мне бы хотелось, чтобы пользователь мог быстро переключаться между «страницами» диаграмм, каждая страница динамически загружалась с сервера и «вставлялась» в основную область содержимого страницы. Поэтому, если контент для определенной диаграммы не загружен, объект диаграммы вызовет ошибки, из-за которых его родительский div не существует.

Так конкретно, как бы мне вести невидимый список именованных div и показывать их в определенных местах по мере необходимости? Проблема начинается с того, что каждый элемент идеально соответствует своему объекту диаграммы.

Я также размышляю над тем, что если бы я мог создать невидимый объект div и сохранить его ссылку в этом массиве вместе с диаграммой? А еще лучше, как мне написать собственный класс, в котором есть только A) Chart Object и B) div Element.

Просто примечание: когда раздел содержимого изменяется, и div исчезает, div-заполнитель диаграммы должен быть «перемещен» обратно на исходное место до , содержимое очищается и заменяется. Я не уверен, какие хитрости существуют, чтобы избежать этого, не двигаясь с трудом. Я просто беспокоюсь, что эти элементы div будут удалены вместе с содержимым страницы, когда оно будет очищено (будет заменено другим динамическим содержимым страницы).

Answer 1

Другой метод, который вы можете применить, - это создать новый div для каждого графика и при необходимости скрыть / показать их.

Например,

var Charts = new Array();
var openChart = null;
var chartTarget = $("#chartTarget");

for(var i = 0; i < nCharts; i++)
{
    var chartDiv = $("<div/>", {
        id:'chart_' + i
    });
    chartDiv.hide();
    chartDiv.appendTo(chartTarget);

    Charts[i] = new FusionCharts("Column.swf", "chart_" + i);

    // now the chart div has been hidden and appended to the target
}

function showChart(index)
{
    // first, see if an open chart exists
    if(openChart !== null)
    {
        openChart.hide();
    }

    // find the target chart div to show
    var targetChartDiv = $("#chart_" + index);
    targetChartDiv.show();

    // now the new opened chart is the target chart div
    openChart = targetChartDiv;
}

Таким образом, каждый из ваших графиков покоитсяв уникальном идентификаторе.А так как идентификатор определяется индексом, вам не нужно создавать массив div.Просто получите элемент по идентификатору, и он должен работать нормально.

Answer 2

Если вы ищете решение для этого: «Диаграммы слияния не позволяют создать вторую диаграмму внутри элемента, в котором уже есть диаграмма», у вас уже есть решение:

Использовать свойство конструктора insertMode в параметре конструктора на основе объектов. Возможные значения: «заменить», «добавить», «предварительно добавить».

Пример, который вы можете попробовать:

    var myChart = FusionCharts.render({
        swfUrl : "../../../../Charts/Column3D.swf",
        width: "400",
        height: '300',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });


     var myChart2 = FusionCharts.render({
        swfUrl : "../../../../Charts/Column2D.swf",
        width: "400",
        height: '300',
        insertMode: 'append',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });

     var myChart3 = FusionCharts.render({
        swfUrl : "../../../../Charts/Line.swf",
        width: "400",
        height: '300',
        insertMode: 'prepend',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });

Answer 3

Отличный способ решить вашу проблему - продолжать создавать диаграммы перед загрузкой страницы, как вы делаете сейчас.Однако измените параметр конструктора на нотацию в стиле объекта.В построении объектного стиля вы можете предварительно указать идентификатор div, где будет отображаться диаграмма (используя атрибут renderAt), а затем при загрузке страницы просто выполнить итерацию по диаграммам и вызвать на них .render().

Нотация в объектном стиле предоставляет больше параметров и конфигураций, чем используемый сейчас метод линейного построения.

Пример:

var charts = [];
function InitCharts() {
    charts[0] = new FusionCharts({
        swfUrl: "MSColumn3DLineDY.swf", 
        renderAt: "divChartSSumA1", 
        width: "340",
        height: "340"
    });
}

function onFinalLoad() {
    var i = charts.length;
    while (i--) {
        charts[i].render();
    }
}

Кроме того, FusionCharts поддерживает рендеринг нескольких диаграмм водин див.В нотации в стиле объекта просто укажите insertMode: "append"

См. методы конструирования в JavaScript в документации FusionCharts, чтобы узнать больше о нотации в стиле объекта.