图表未正确呈现，canvasjs

Question

我正在尝试使用 canvasJS 渲染两个动态图表，第一个图表正确渲染，实际上第二个图表正确填充，请查看 inspect element 图像，但它没有显示在页面。

这是界面，只显示一张图表

这里是 inspect elem。

#adverts正在渲染，但这里没有显示。

.chartContainer{
    height: 400px;
    width: 100%; 
}

PS 我试图注释掉第一个图表渲染代码，但根本不起作用，仍然只显示第一个。

编辑

这是console log关于我要返回渲染图表的内容

这是片段

function drawChart(obj, placeholder, From, To){
var legendFrom;
var legendTo;
if(From != 'undefined'){
    legendFrom = From;
}
if(To != 'undefined'){
    legendTo = To;
}
var dataPoints = [];
var from = [];
var to = [];
var advertFrom = [];
var advertTo = [];
for (var i = 0; i <= obj.length - 1; i++) {
    if(obj[i].typeOf != 'undefined' || obj[i].typeOf != ''){
        if(obj[i].typeOf == 'from'){
            from.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
            advertFrom.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].adverts});
        }else{
            to.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
            advertTo.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:obj[i].adverts});
        }
    }
    else
        from.push({label:obj[i].year+"-"+obj[i].month+"-"+obj[i].day,y:Math.round(obj[i].avgPrice * 1000) / 1000});
}
var chart = new CanvasJS.Chart("chartContainer",
{
    animationEnabled: true,
    //theme: "theme1",
    zoomEnabled: true,
    title:{
        text: placeholder
    },
    data: [
        {
            type: "spline",  //change type to bar, line, area, pie, etc
            showInLegend: true,
            legendText: "From "+legendFrom, 
            dataPoints: from
        },
        {
            type: "spline",  
            showInLegend: true,
            legendText: "From "+legendTo, 
            dataPoints: to
        }
    ],
    legend: {
        cursor: "pointer",
        itemclick: function (e) {
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
        }
        chart.render();
        }
    }
});

chart.render();
var adverts = new CanvasJS.Chart("adverts",
{
    animationEnabled: true,
    zoomEnabled: true,
    title:{
        text: placeholder
    },
    data: [
        {
            type: "column",  //change type to bar, line, area, pie, etc
            showInLegend: true,
            legendText: "From "+legendFrom, 
            dataPoints: advertFrom
        },
        {
            type: "column",  
            showInLegend: true,
            legendText: "From "+legendTo, 
            dataPoints: advertTo
        }
    ]
});
adverts.render();
}

Answer 1

我刚刚在 JS 中复制了一个 canvasJS 环境Fiddle http://jsfiddle.net/fLbngdv9/1/

确保您为每个图表使用新的 VAR。

var chart = new CanvasJS.Chart("chartContainer", {..});
chart.render();
var chart2 = new CanvasJS.Chart("chartContainer2", {..});
chart2.render();

似乎工作正常。如果您能提供一些代码示例，那么也许我可以帮助您找到答案。

可能只是复制粘贴错误，但您在最底部有语法错误。

...
adverts.render();
}

这应该是

...
adverts.render();

只需删除多余的支架即可。我更新了 JS Fiddle 以更像您的示例...[here]

编辑：

我能够在我最新的 JSFiddle 中复制，我知道这听起来很疯狂但是当我将你的第二个 div 的 ID 从广告更改为 chartContainer2 时它工作正常。

仍在调查这是为什么，但我会尝试重命名 div 上的 ID 以及图表创建的参考。

SEE HERE

编辑 2：

这似乎是 Chrome ID 广告的特定错误。要复制所有你需要做的就是检查这个 link http://www.briangebel.com/test.html

（如您所见，div 广告隐藏在 Chrome 中，但在 FF、Opera、IE 中可见）

那么发生了什么..

Chrome 的 ADBlocker 扩展程序看到此 ID 并自动添加页面内样式sheet.
此样式sheet具有以下样式

这只会影响 Chrome，因为它是由特定扩展程序引起的。（我正在尝试联系开发人员以查看他是否可以解决此问题，但在此之前请遵循以下解决方案）

解决方案

很简单，不要使用那个 ID。（你可以简单地禁用 AdBlocker，但这个扩展被广泛使用我仍然建议更改 ID）

图表未正确呈现，canvasjs

chart is not rendering properly, canvasjs

javascript

jquery

canvasjs