2014-06-22 1 views
2

Я создал несколько AmCharts для нескольких разных целей, но на этот раз я застрял. Я пытался получить эту диаграмму для показа в течение последних часов без каких-либо успехов. Я думаю, что я пробовал все, что мог придумать, поэтому я надеюсь, что кто-то сможет определить, что не так с кодом.Не можете понять, почему этот график AmCharts не отображается?

Вот jsfiddle: http://jsfiddle.net/mDR87/2/

Это код JS, который не оказывает никакого графика:

var chartDatagc1 = []; 
    var newDate0 = new Date("2014-05-01"); 
     chartDatagc1.push({ 
      date: newDate0, 
      engine0: "6", 
      engine1: "16"}); 

    var newDate1 = new Date("2014-05-02"); 
     chartDatagc1.push({ 
      date: newDate1, 
      engine0: "6", 
      engine1: "16"}); 

    var newDate2 = new Date("2014-05-03"); 
     chartDatagc1.push({ 
      date: newDate2, 
      engine0: "31", 
      engine1: "16"}); 

    var newDate3 = new Date("2014-05-04"); 
     chartDatagc1.push({ 
      date: newDate3, 
      engine0: "6", 
      engine1: "16"}); 

    var newDate4 = new Date("2014-05-06"); 
     chartDatagc1.push({ 
      date: newDate4, 
      engine0: "6", 
      engine1: "16"}); 

    var newDate5 = new Date("2014-05-08"); 
     chartDatagc1.push({ 
      date: newDate5, 
      engine0: "6", 
      engine1: "16"}); 

    var newDate6 = new Date("2014-05-22"); 
     chartDatagc1.push({ 
      date: newDate6, 
      engine0: "41", 
      engine1: "17"}); 

    var newDate7 = new Date("2014-05-23"); 
     chartDatagc1.push({ 
      date: newDate7, 
      engine0: "41", 
      engine1: "17"}); 

    var newDate8 = new Date("2014-05-24"); 
     chartDatagc1.push({ 
      date: newDate8, 
      engine0: "44", 
      engine1: "16"}); 

    var newDate9 = new Date("2014-05-25"); 
     chartDatagc1.push({ 
      date: newDate9, 
      engine0: "44", 
      engine1: "16"}); 

    var newDate10 = new Date("2014-05-26"); 
     chartDatagc1.push({ 
      date: newDate10, 
      engine0: "44", 
      engine1: "17"}); 

    var newDate11 = new Date("2014-05-27"); 
     chartDatagc1.push({ 
      date: newDate11, 
      engine0: "44", 
      engine1: "17"}); 

    var newDate12 = new Date("2014-05-28"); 
     chartDatagc1.push({ 
      date: newDate12, 
      engine0: "44", 
      engine1: "17"}); 

    var newDate13 = new Date("2014-05-29"); 
     chartDatagc1.push({ 
      date: newDate13, 
      engine0: "40", 
      engine1: "17"}); 

    var newDate14 = new Date("2014-05-30"); 
     chartDatagc1.push({ 
      date: newDate14, 
      engine0: "40", 
      engine1: "17"}); 

    var newDate15 = new Date("2014-05-31"); 
     chartDatagc1.push({ 
      date: newDate15, 
      engine0: "44", 
      engine1: "17"}); 



var chartgc1 = AmCharts.makeChart("chartdivgc1", { 
    "type": "serial", 
    "theme": "none", 
    "pathToImages": "http://www.amcharts.com/lib/3/images/", 
    "legend": { 
     "useGraphSettings": true 
    }, 
    "dataProvider": chartDatagc1, 
    "valueAxes": [{ 
     "integersOnly": true, 
     "maximum": 50, 
     "minimum": 1, 
     "reversed": true, 
     "axisAlpha": 0, 
     "dashLength": 5, 
     "gridCount": 10, 
     "position": "left", 
     "title": "Position" 
    }], 
    "graphs": [{ 
     "id":"g1", 
     "balloonText": "Bing Sweden<br />[[category]]<br /><b><span style='font-size:14px;'>Placering: [[value]]</span></b>", 
     "bullet": "bubble", 
     "bulletSize": 3, 
     "bulletBorderAlpha": 1, 
     "bulletColor":"#FFFFFF", 
     "hideBulletsCount": 50, 
     "title": "Bing Sweden", 
     "valueField": "engine0", 
     "useLineColorForBulletBorder":true, 
     "lineColor": "#0297A9" 
    }, { 
     "id":"g2", 
     "balloonText": "Google Sweden<br />[[category]]<br /><b><span style='font-size:14px;'>Placering: [[value]]</span></b>", 
     "bullet": "bubble", 
     "bulletSize": 3, 
     "bulletBorderAlpha": 1, 
     "bulletColor":"#FFFFFF", 
     "hideBulletsCount": 50, 
     "title": "Google Sweden", 
     "valueField": "engine1", 
     "useLineColorForBulletBorder":true, 
     "lineColor": "#E2CC30" 
    } 
    ], 
    "chartCursor": { 
     "cursorPosition": "mouse" 
    }, 
    "categoryField": "date", 
    "categoryAxis": { 
     "parseDates": true, 
     "axisColor": "#f3f3f3", 
     "dashLength": 1, 
     "minorGridEnabled": true, 
     "dateFormats": [{period:"fff",format:"JJ:NN:SS"}, 
{period:"ss",format:"JJ:NN:SS"}, 
{period:"mm",format:"JJ:NN"}, 
{period:"hh",format:"JJ:NN"}, 
{period:"DD",format:"YYYY-MM-DD"}, 
{period:"WW",format:"YYYY-MM-DD"}, 
{period:"MM",format:"MMM"}, 
{period:"YYYY",format:"YYYY"}] 
    } 
}); 

ответ

0

Там сращения проблема с оказанием, так как, она доза показать, если вы запускаете событие изменения размера, вы можете попытаться добавить встроенную ширину и высоту, или если он находится в модальном/диалоговом режиме, то только после того, как размер будет установлен.

Вы можете использовать

chart.invalidateNow(); chart.validateSize();

Рассчитать размер. /R