Twitter bootstrap 带bootstrap 3.3.1模式的Amcharts

当我将amchart插入bootstrap 3.3.1模式时，数据不会显示，而是在显示的模式之外。代码如下：

html:

大模态

js:

AmCharts.ready（函数（）{
generateChartData（）；
createStockChart（）；
});
var chartData1=[]；
var chartData2=[]；
var chartData3=[]；
var chartData4=[]；
函数generateChartData（）{
var firstDate=新日期（）；
firstDate.setDate（firstDate.getDate（）-500）；
firstDate.setHours（0,0,0,0）；
对于（变量i=0；i<500；i++）{
var newDate=新日期（firstDate）；
newDate.setDate（newDate.getDate（）+i）；
var a1=Math.round（Math.random（）*（40+i））+100+i；
var b1=Math.round（Math.random（）*（1000+i））+500+i*2；
var a2=数学圆整（数学随机（）*（100+i））+200+i；
var b2=Math.round（Math.random（）*（1000+i））+600+i*2；
var a3=数学圆整（Math.random（）*（100+i））+200；
var b3=Math.round（Math.random（）*（1000+i））+600+i*2；
var a4=数学圆整（Math.random（）*（100+i））+200+i；
var b4=数学圆整（数学随机（）*（100+i））+600+i；
chartData1.push({
日期：newDate，
值：a1，
卷：b1
});
chartData2.push({
日期：newDate，
值：a2，
卷数：b2
});
chartData3.push({
日期：newDate，
价值：a3，
卷：b3
});
chartData4.push({
日期：newDate，
价值：a4，
数量：b4
});
}
}
函数createStockChart（）{
var chart=新的AmCharts.AmStockChart（）；
chart.pathToImages=“/static/images/”；
//数据集//////////////////////////////////////////
//首先创建数据集
var dataSet1=新的AmCharts.DataSet（）；
dataSet1.title=“第一个数据集”；
dataSet1.fieldMappings=[
{
fromField：“值”，
托菲尔德：“价值”
},
{
fromField：“卷”，
托菲尔德：“音量”
}
];
dataSet1.dataProvider=chartData1；
dataSet1.categoryField=“日期”；
var dataSet2=新的AmCharts.DataSet（）；
dataSet2.title=“第二个数据集”；
dataSet2.fieldMappings=[
{
fromField：“值”，
托菲尔德：“价值”
},
{
fromField：“卷”，
托菲尔德：“音量”
}
];
dataSet2.dataProvider=chartData2；
dataSet2.categoryField=“日期”；
var dataSet3=新的AmCharts.DataSet（）；
dataSet3.title=“第三个数据集”；
dataSet3.fieldMappings=[
{
fromField：“值”，
托菲尔德：“价值”
},
{
fromField：“卷”，
托菲尔德：“音量”
}
];
dataSet3.dataProvider=chartData3；
dataSet3.categoryField=“日期”；
var dataSet4=新的AmCharts.DataSet（）；
dataSet4.title=“第四个数据集”；
dataSet4.fieldMappings=[
{
fromField：“值”，
托菲尔德：“价值”
},
{
fromField：“卷”，
托菲尔德：“音量”
}
];
dataSet4.dataProvider=chartData4；
dataSet4.categoryField=“日期”；
//将数据集设置为图表
chart.dataSets=[dataSet1、dataSet2、dataSet3、dataSet4]；
//面板///////////////////////////////////////////
//第一个库存小组
var StockPanel 1=新的AmCharts.StockPanel（）；
stockPanel1.showCategoryAxis=假；
stockPanel1.title=“值”；
StockPanel 1.0%高度=70；
//第一个库存面板图
var graph1=新的AmCharts.StockGraph（）；
graph1.valueField=“值”；
图1.可比=真；
graph1.compareField=“值”；
图1.bullet=“圆形”；
graph1.bulletBorderColor=“#FFFFFF”；
图1.1α=1；
graph1.ballootText=“[[title]]：[[value]]”；
graph1.comparegraphballodtext=“[[title]]：[[value]]”；
图1.compareGraphBullet=“圆形”；
图1.compareGraphBulletBorderColor=“#FFFFFF”；
图1.comparegraphyα=1；
stockPanel1.添加StockGraph（图1）；
//创建股票图例
var stockLegend1=新的AmCharts.StockLegend（）；
stockLegend1.periodValueTextComparing=“[percents.value.close]]%”；
stockLegend1.periodValueTextRegular=“[value.close]]”；
stockPanel1.stockLegend=stockLegend1；
//第二个库存小组
var StockPanel 2=新的AmCharts.StockPanel（）；
stockPanel2.title=“卷”；
StockPanel 2.0%高度=30；
var graph2=新的AmCharts.StockGraph（）；
graph2.valueField=“体积”；
graph2.type=“列”；
graph2.showBalloon=false；
图2.2.1-1；
stockPanel2.添加StockGraph（图2）；
var stockLegend2=新的AmCharts.StockLegend（）；
stockLegend2.periodValueTextRegular=“[value.close]]”；
stockPanel2.stockLegend=stockLegend2；
//将面板设置为图表
chart.panels=[stockPanel1，stockPanel2]；
//其他设置////////////////////////////////////
var sbsettings=new AmCharts.ChartScrollbarSettings（）；
sbsettings.graph=graph1；
chart.chartScrollbarSettings=sbsettings；
//光标
var cursorSettings=new AmCharts.ChartCursorSettings（）；
cursorSettings.valueballodesEnabled=true；
chart.chartCursorSettings=光标设置；
//周期选择器///////////////////////////////////
var periodSelector=new AmCharts.periodSelector（）；
periodSelector.position=“left”；
periodSelector.periods=[
{
句号：“DD”，
计数：10，
标签：“10天”
},
{
句号：“MM”，
选择：正确，
计数：1，
标签：“1个月”
},
{
期间：“yyy”，
计数：1，
标签：“1年”
},
{
P
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <div id="chartdiv" style="width:100%; height:600px;"></div>
      </div>
  </div>
</div>

AmCharts.ready(function () {
    generateChartData();
    createStockChart();
});

var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];

function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);
    firstDate.setHours(0, 0, 0, 0);

    for (var i = 0; i < 500; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
        var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

        var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
        var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

        var a3 = Math.round(Math.random() * (100 + i)) + 200;
        var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

        var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
        var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;

        chartData1.push({
            date: newDate,
            value: a1,
            volume: b1
        });
        chartData2.push({
            date: newDate,
            value: a2,
            volume: b2
        });
        chartData3.push({
            date: newDate,
            value: a3,
            volume: b3
        });
        chartData4.push({
            date: newDate,
            value: a4,
            volume: b4
        });
    }
}

function createStockChart() {
    var chart = new AmCharts.AmStockChart();
    chart.pathToImages = "/static/images/";

    // DATASETS //////////////////////////////////////////
    // create data sets first
    var dataSet1 = new AmCharts.DataSet();
    dataSet1.title = "first data set";
    dataSet1.fieldMappings = [
        {
            fromField: "value",
            toField: "value"
        },
        {
            fromField: "volume",
            toField: "volume"
        }
    ];
    dataSet1.dataProvider = chartData1;
    dataSet1.categoryField = "date";

    var dataSet2 = new AmCharts.DataSet();
    dataSet2.title = "second data set";
    dataSet2.fieldMappings = [
        {
            fromField: "value",
            toField: "value"
        },
        {
            fromField: "volume",
            toField: "volume"
       }
    ];
    dataSet2.dataProvider = chartData2;
    dataSet2.categoryField = "date";

    var dataSet3 = new AmCharts.DataSet();
    dataSet3.title = "third data set";
    dataSet3.fieldMappings = [
        {
            fromField: "value",
            toField: "value"
        },
        {
            fromField: "volume",
            toField: "volume"
        }
    ];
    dataSet3.dataProvider = chartData3;
    dataSet3.categoryField = "date";

    var dataSet4 = new AmCharts.DataSet();
    dataSet4.title = "fourth data set";
    dataSet4.fieldMappings = [
        {
            fromField: "value",
            toField: "value"
        },
        {
            fromField: "volume",
            toField: "volume"
        }
    ];
    dataSet4.dataProvider = chartData4;
    dataSet4.categoryField = "date";

    // set data sets to the chart
    chart.dataSets = [dataSet1, dataSet2, dataSet3, dataSet4];

    // PANELS ///////////////////////////////////////////
    // first stock panel
    var stockPanel1 = new AmCharts.StockPanel();
    stockPanel1.showCategoryAxis = false;
    stockPanel1.title = "Value";
    stockPanel1.percentHeight = 70;

    // graph of first stock panel
    var graph1 = new AmCharts.StockGraph();
    graph1.valueField = "value";
    graph1.comparable = true;
    graph1.compareField = "value";
    graph1.bullet = "round";
    graph1.bulletBorderColor = "#FFFFFF";
    graph1.bulletBorderAlpha = 1;
    graph1.balloonText = "[[title]]:<b>[[value]]</b>";
    graph1.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
    graph1.compareGraphBullet = "round";
    graph1.compareGraphBulletBorderColor = "#FFFFFF";
    graph1.compareGraphBulletBorderAlpha = 1;
    stockPanel1.addStockGraph(graph1);

    // create stock legend
    var stockLegend1 = new AmCharts.StockLegend();
    stockLegend1.periodValueTextComparing = "[[percents.value.close]]%";
    stockLegend1.periodValueTextRegular = "[[value.close]]";
    stockPanel1.stockLegend = stockLegend1;


    // second stock panel
    var stockPanel2 = new AmCharts.StockPanel();
    stockPanel2.title = "Volume";
    stockPanel2.percentHeight = 30;
    var graph2 = new AmCharts.StockGraph();
    graph2.valueField = "volume";
    graph2.type = "column";
    graph2.showBalloon = false;
    graph2.fillAlphas = 1;
    stockPanel2.addStockGraph(graph2);

    var stockLegend2 = new AmCharts.StockLegend();
    stockLegend2.periodValueTextRegular = "[[value.close]]";
    stockPanel2.stockLegend = stockLegend2;

    // set panels to the chart
    chart.panels = [stockPanel1, stockPanel2];


    // OTHER SETTINGS ////////////////////////////////////
    var sbsettings = new AmCharts.ChartScrollbarSettings();
    sbsettings.graph = graph1;
    chart.chartScrollbarSettings = sbsettings;

    // CURSOR
    var cursorSettings = new AmCharts.ChartCursorSettings();
    cursorSettings.valueBalloonsEnabled = true;
    chart.chartCursorSettings = cursorSettings;


    // PERIOD SELECTOR ///////////////////////////////////
    var periodSelector = new AmCharts.PeriodSelector();
    periodSelector.position = "left";
    periodSelector.periods = [
        {
            period: "DD",
            count: 10,
            label: "10 days"
        },
        {
            period: "MM",
            selected: true,
            count: 1,
            label: "1 month"
        },
        {
            period: "YYYY",
            count: 1,
            label: "1 year"
        },
        {
            period: "YTD",
            label: "YTD"
        },
        {
            period: "MAX",
            label: "MAX"
        }
    ];
    chart.periodSelector = periodSelector;


    // DATA SET SELECTOR
    var dataSetSelector = new AmCharts.DataSetSelector();
    dataSetSelector.position = "left";
    chart.dataSetSelector = dataSetSelector;

    chart.write('chartdiv');
}

$('#myModal').on('shown.bs.modal', function (e) {
  chart.invalidateSize();
})