我不明白为什么这个AmCharts图表没有显示出来

Can't see why this AmCharts chart doesn't show?

本文关键字:显示 AmCharts 明白 为什么      更新时间:2023-09-26

我已经为几个不同的用途设置了一些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"}]
    }
});

有一个问题,因为它会显示,如果你触发一个大小调整事件,你可以尝试添加一个内联的宽度和高度,或者如果它是在一个模态/对话框,只有渲染后的大小设置。

可以使用

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

重新计算大小。/R