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

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

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

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

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-заполнитель диаграммы необходимо «переместить» обратно на исходное место, прежде чем содержимое будет очищено и заменено. Я не уверен, какие есть уловки, чтобы избежать этого, не перемещая innerHTML трудным путем. Я просто беспокоюсь о том, что эти элементы div будут удалены вместе с содержимым страницы, когда оно будет очищено (для замены другим динамическим содержимым страницы).


javascript html fusioncharts dynamic-content
person Jerry Dodge    schedule 28.03.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

Используйте свойство конструктора 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"
    });
person sudipto    schedule 28.03.2012

arrow_upward
2
arrow_downward

Другой метод, который вы можете использовать, — создать новый 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. Просто получите элемент по идентификатору, и он должен работать нормально.

person Hrishikesh Choudhari    schedule 28.03.2012

arrow_upward
1
arrow_downward

Отличный способ решить вашу проблему — продолжать создавать экземпляры диаграмм перед загрузкой страницы, как вы делаете сейчас. Однако измените параметр конструктора на нотацию объектного стиля. В построении объектного стиля вы можете предварительно указать идентификатор 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 поддерживает отображение нескольких диаграмм в одном div. В нотации объектного стиля просто укажите insertMode: "append"

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

person Shamasis Bhattacharya    schedule 28.03.2012