amcharts не может загружаться в div, если фиксированный размер, но затем метки оси отключены

Question

Я пытался заставить эти диаграммы работать правильно и не может получить никакого разрешения по этому вопросу. Я пытаюсь включить amcharts в web-приложение и смог отображать диаграммы, но с ошибками. Когда я устанавливаю ширину div в процентах, график не будет отображаться, если окно браузера не будет изменено или F12 не будет нажата. Если я установил его на фиксированную ширину px, он отображает первый раз, но тогда метки меток обрезаются. Поиски Google нашли тот, который говорит о диаграмме, которая не может отображать в скрытом div, но я не установил div в скрытое и не уверен, как проверить, загрузилась ли страница перед рендерингом в javascript.

getSecondChart: function (demoChart3) { 


     var chart; 
     var chartData = [{ 
      "year": 2009, 
      "income": 23.5 

     }, { 
      "year": 2010, 
      "income": 26.2 

     }, { 
      "year": 2011, 
      "income": 30.1 

     }, { 
      "year": 2012, 
      "income": 29.5 

     }, { 
      "year": 2013, 
      "income": 30.6 

     }, { 
      "year": 2014, 
      "income": 34.1 

     } 
     ]; 



     AmCharts.ready(function() { 
      // SERIAL CHART 
      var chart = new AmCharts.AmSerialChart(); 
      chart.dataProvider = chartData; 
      chart.categoryField = "year"; 
      chart.startDuration = 2; 
      // change balloon text color     
      chart.balloon.color = "#000000"; 


      // AXES 
      // category 
      var categoryAxis = chart.categoryAxis; 
      categoryAxis.gridPosition = "start"; 

      // value 
      var valueAxis = new AmCharts.ValueAxis(); 
      valueAxis.axisAlpha = 0; 
      chart.addValueAxis(valueAxis); 

      // GRAPHS 
      // column graph 
      var graph1 = new AmCharts.AmGraph(); 
      graph1.type = "column"; 
      graph1.title = "Income"; 
      graph1.lineColor = "#FF6600"; 
      graph1.valueField = "income"; 
      graph1.lineAlpha = 1; 
      graph1.fillAlphas = 1; 
      graph1.dashLengthField = "dashLengthColumn"; 
      graph1.alphaField = "alpha"; 
      graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>"; 
      chart.addGraph(graph1); 

      // WRITE 
      chart.write("demoChart3"); 
     }) 
    } 

HTML

  <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false"> 
        <div id="demoChart3" style="width: 80%; height:342px;"></div> 
      </div> 

Я использую додзё, а также и не нравится, как появились диаграммы и выбрали amcharts. Я вызываю функцию диаграммы из моей первой функции загрузки:

renderChart = function() { 
    myhomeModule.getSecondChart("demoChart3"); 

} 

Answer 1

Я был в состоянии получить ваш пример работает в скрипкой: http://jsfiddle.net/danzoeller/JRuC7/

amCharts является очень гибким, насколько его макета в DIV. Я использую его в сочетании с twitter bootstrap, и он всегда изменяет размеры, чтобы идеально подогнать окно браузера. Я предполагаю, что у вас есть некоторый конфликтный CSS где-то, что отсекает div, который содержит вашу диаграмму. Попробуйте удалить свою таблицу стилей, чтобы убедиться, что она отображается правильно, а затем добавьте свои стили обратно, чтобы узнать, кто является виновником.

 function HomeModule() { 
     this.getSecondChart = function (demoChart3) { 


      var chart; 
      var chartData = [{ 
       "year": 2009, 
       "income": 23.5 

      }, { 
       "year": 2010, 
       "income": 26.2 

      }, { 
       "year": 2011, 
       "income": 30.1 

      }, { 
       "year": 2012, 
       "income": 29.5 

      }, { 
       "year": 2013, 
       "income": 30.6 

      }, { 
       "year": 2014, 
       "income": 34.1 

      } 
      ]; 



      AmCharts.ready(function() { 
       // SERIAL CHART 
       var chart = new AmCharts.AmSerialChart(); 
       chart.dataProvider = chartData; 
       chart.categoryField = "year"; 
       chart.startDuration = 2; 
       // change balloon text color     
       chart.balloon.color = "#000000"; 


       // AXES 
       // category 
       var categoryAxis = chart.categoryAxis; 
       categoryAxis.gridPosition = "start"; 

       // value 
       var valueAxis = new AmCharts.ValueAxis(); 
       valueAxis.axisAlpha = 0; 
       chart.addValueAxis(valueAxis); 

       // GRAPHS 
       // column graph 
       var graph1 = new AmCharts.AmGraph(); 
       graph1.type = "column"; 
       graph1.title = "Income"; 
       graph1.lineColor = "#FF6600"; 
       graph1.valueField = "income"; 
       graph1.lineAlpha = 1; 
       graph1.fillAlphas = 1; 
       graph1.dashLengthField = "dashLengthColumn"; 
       graph1.alphaField = "alpha"; 
       graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>"; 
       chart.addGraph(graph1); 

       // WRITE 
       chart.write("demoChart3"); 
      }) 
     } 
    }; 

    var myHomeModule = new HomeModule(); 

    $(document).ready(function() { 
     myHomeModule.getSecondChart(); 
    });