Question

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

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

这里是检查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

我刚刚在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从广告更改为chartContainer2时，它运行良好。

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

SEE HERE

编辑2：

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

（正如你可以看到div广告隐藏在Chrome中，但在FF，Opera，IE上可见）

发生了什么......

Chrome的 ADBlocker 扩展程序会看到此ID并自动添加页面样式表。

此样式表具有以下样式

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

<强>解决方案

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

图表无法正确渲染，canvasjs

1 个答案: