Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/478.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Can';我不明白为什么这个图表没有';你不来吗?_Javascript_Svg_Charts_Rendering_Amcharts - Fatal编程技术网

Javascript Can';我不明白为什么这个图表没有';你不来吗?

Javascript Can';我不明白为什么这个图表没有';你不来吗?,javascript,svg,charts,rendering,amcharts,Javascript,Svg,Charts,Rendering,Amcharts,我已经为几个不同的用途设置了许多AmCharts,但这次我被卡住了。在过去的几个小时里,我一直试图让这张图表显示出来,但没有成功。我想我已经尝试了我能想到的一切,所以我希望有人能够发现代码的错误 下面是一个JSFIDLE: 这是不呈现任何图表的JS代码: var chartDatagc1 = []; var newDate0 = new Date("2014-05-01"); chartDatagc1.push({ date: newDat

我已经为几个不同的用途设置了许多AmCharts,但这次我被卡住了。在过去的几个小时里,我一直试图让这张图表显示出来,但没有成功。我想我已经尝试了我能想到的一切,所以我希望有人能够发现代码的错误

下面是一个JSFIDLE:

这是不呈现任何图表的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"}]
    }
});
var chartDatagc1=[];
var newDate0=新日期(“2014-05-01”);
chartDatagc1.push({
日期:newDate0,
引擎0:“6”,
引擎1:“16”});
var newDate1=新日期(“2014-05-02”);
chartDatagc1.push({
日期:newDate1,
引擎0:“6”,
引擎1:“16”});
var newDate2=新日期(“2014-05-03”);
chartDatagc1.push({
日期:newDate2,
引擎0:“31”,
引擎1:“16”});
var newDate3=新日期(“2014-05-04”);
chartDatagc1.push({
日期:newDate3,
引擎0:“6”,
引擎1:“16”});
var newDate4=新日期(“2014-05-06”);
chartDatagc1.push({
日期:newDate4,
引擎0:“6”,
引擎1:“16”});
var newDate5=新日期(“2014-05-08”);
chartDatagc1.push({
日期:newDate5,
引擎0:“6”,
引擎1:“16”});
var newDate6=新日期(“2014-05-22”);
chartDatagc1.push({
日期:newDate6,
引擎0:“41”,
引擎1:“17”});
var newDate7=新日期(“2014-05-23”);
chartDatagc1.push({
日期:newDate7,
引擎0:“41”,
引擎1:“17”});
var newDate8=新日期(“2014-05-24”);
chartDatagc1.push({
日期:newDate8,
引擎0:“44”,
引擎1:“16”});
var newDate9=新日期(“2014-05-25”);
chartDatagc1.push({
日期:newDate9,
引擎0:“44”,
引擎1:“16”});
var newDate10=新日期(“2014-05-26”);
chartDatagc1.push({
日期:newDate10,
引擎0:“44”,
引擎1:“17”});
var newDate11=新日期(“2014-05-27”);
chartDatagc1.push({
日期:newDate11,
引擎0:“44”,
引擎1:“17”});
var newDate12=新日期(“2014-05-28”);
chartDatagc1.push({
日期:newDate12,
引擎0:“44”,
引擎1:“17”});
var newDate13=新日期(“2014-05-29”);
chartDatagc1.push({
日期:newDate13,
引擎0:“40”,
引擎1:“17”});
var newDate14=新日期(“2014-05-30”);
chartDatagc1.push({
日期:newDate14,
引擎0:“40”,
引擎1:“17”});
var newDate15=新日期(“2014-05-31”);
chartDatagc1.push({
日期:newDate15,
引擎0:“44”,
引擎1:“17”});
var chartgc1=AmCharts.makeChart(“chartdivgc1”{
“类型”:“串行”,
“主题”:“无”,
“路径图像”:http://www.amcharts.com/lib/3/images/",
“传奇”:{
“useGraphSettings”:正确
},
“数据提供者”:chartDatagc1,
“价值轴”:[{
“仅限整数”:true,
“最大值”:50,
“最低限度”:1,
“反向”:正确,
“axisAlpha”:0,
“dashLength”:5,
“网格计数”:10,
“位置”:“左”,
“职务”:“职务”
}],
“图表”:[{
“id”:“g1”,
“BallooText:“Bing瑞典
[[category]]
放置:[[value]]”, “子弹”:“气泡”, “bulletSize”:3, “Bullet BorderAlpha”:1, “bulletColor”:“FFFFFF”, “HidebulletScont”:50, “标题”:“Bing瑞典”, “valueField”:“engine0”, “useLineColorForBulletBorder”:正确, “线条颜色”:“0297A9” }, { “id”:“g2”, “BallooText:“谷歌瑞典
[[category]]
定位:[[value]]”, “子弹”:“气泡”, “bulletSize”:3, “Bullet BorderAlpha”:1, “bulletColor”:“FFFFFF”, “HidebulletScont”:50, “标题”:“谷歌瑞典”, “valueField”:“engine1”, “useLineColorForBulletBorder”:正确, “线条颜色”:“E2CC30” } ], “图表光标”:{ “光标位置”:“鼠标” }, “类别字段”:“日期”, “分类法”:{ “parseDates”:正确, “axisColor”:“F3”, “dashLength”:1, “minorGridEnabled”:真, “日期格式”:[{期间:“fff”,格式:“JJ:NN:SS”}, {句号:“ss”,格式:“JJ:NN:ss”}, {句号:“mm”,格式:“JJ:NN”}, {句号:“hh”,格式:“JJ:NN”}, {期间:“DD”,格式:“YYYY-MM-DD”}, {期间:“WW”,格式:“YYYY-MM-DD”}, {句号:“MM”,格式:“MMM”}, {期间:“YYYY”,格式:“YYYY”}] } });
渲染可能存在问题,因为如果触发调整大小事件,它会显示出来,您可以尝试添加内联宽度和高度,或者如果它处于模式/对话中,则仅在设置大小后渲染

你可以用

chart.invalidateNow(); chart.validateSize()

重新计算大小。 /R