javascript - 图表未正确渲染，canvasjs

Question

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

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

这是检查 elem。

#adverts 正在渲染，但未在此处显示。

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

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

编辑

这里是关于我要返回渲染图表的内容的控制台日志

这是片段

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

我刚刚在 JSFiddle 中复制了一个 canvasJS 环境 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 从 ads 更改为 ChartContainer2 时，它工作得很好。

仍在调查原因，但我会尝试重命名 div 上的 ID 以及图形创建的引用。

SEE HERE

编辑2:

这似乎是 Chrome 特有的 ID 广告错误。要复制您需要做的就是查看此链接 http://www.briangebel.com/test.html

(如您所见，div 广告在 Chrome 中隐藏，但在 FF、Opera、IE 上可见)

所以发生了什么..

1. Chrome 的 ADBlocker 扩展程序会看到此 ID 并自动添加页内样式表。
2. 该样式表具有以下样式

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

解决方案

很简单，不要使用该 ID。 (您可以简单地禁用 AdBlocker，但此扩展程序使用非常广泛，我仍然建议更改 ID)