2014-06-22 59 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

有縫可與自繪製出了問題,如果劑量顯示你觸發一個resize事件,你可以嘗試添加一個內聯的寬度和高度,或者如果它是在一個模式/對話框中,只有在大小設置後才渲染。

您可以使用

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

重新計算大小。 /R