Question

我有一个div（overflow：auto），我会在一段时间后动态添加内部div。添加新的时，会将其添加到开头。每个内部div都有一个jqPlot图表，只要只有一个它可以正常工作，但只要添加另一个div，就会发生旧事件的两件事：

图表在div中向下移动。
图表没有图表或背景（虽然它有轴标记）。

根据开发人员工具，所有画布都正确定位，但它们都是空的。这是用于添加新图表的代码（chart_div_？exists）：

$.jqplot('chart_div_' + chartCounter, sold_plot, {
    seriesColors: [ "#30D2FF", "BFFFCB", "BFFFCB", "BFFFCB" ],
    seriesDefaults: {
        showMarker: false,
        markerOptions: {
            show: false,
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            min: plot_min,
            max: plot_max,
        }
    },
    grid: {
        background: '#444444',
    },
});
chartCounter++;

这可能与移动画布有关吗？我尝试重新绘制它，但它没有用。

Answer 1

以下是可以帮助您的示例：Jsfiddle Link

HTML：

<div id="main">
    <div id="chart1" style="margin-top:20px; margin-left:20px;"></div>
</div> 
<a href="#" class="topopup">Click Here Trigger</a>

使用Javascript：

$(document).ready(function () {
    $.jqplot.config.enablePlugins = true;
    var chartData = [
        ["19-Jan-2012", 2.61],
        ["20-Jan-2012", 5.00],
        ["21-Jan-2012", 6.00]
    ];
    var cnt = 1;
    // add a custom tick formatter, so that you don't have to include the entire date renderer library.
    $.jqplot.DateTickFormatter = function (format, val) {
        // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle
        val = (new Date(val)).getTime();
        format = '%b&nbsp%#d'
        return $.jsDate.strftime(val, format);
    };

    function PlotChart(chartData, extraDays, elem) {

        var plot2 = $.jqplot(elem, [chartData], {
            title: 'Mouse Cursor Tracking',
            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    barPadding: 1,
                    barWidth: 50
                },
                pointLabels: {
                    show: true
                }
            },
            axes: {
                xaxis: {
                    pad: 1,
                    // a factor multiplied by the data range on the axis to give the            
                    renderer: $.jqplot.CategoryAxisRenderer,
                    // renderer to use to draw the axis,     
                    tickOptions: {
                        formatString: '%b %#d',
                        formatter: $.jqplot.DateTickFormatter
                    }
                },
                yaxis: {
                    tickOptions: {
                        formatString: '$%.2f'
                    }
                }
            },
            highlighter: {
                sizeAdjust: 7.5
            },
            cursor: {
                show: true
            }
        });
    }

    PlotChart(chartData, 3, "chart1");


    $("a.topopup").click(function () {
        loading();
        return false;
    });



    function loading() {
        var div = $("#main");
        cnt = cnt + 1;
        var elemId = "chart" + cnt;
        div.prepend("<div id='" + elemId + "'></div>");
        PlotChart(chartData, 3, elemId);
    }

});

将新的jqPlot图表动态添加到div会使旧的jqPlot图表为空

1 个答案: