0

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

这是界面，只显示一个图表 在此处输入图像描述

这是检查元素。在此处输入图像描述

#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();
}
4

1 回答 1

2

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

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

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

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

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

...
adverts.render();
}

这应该是

...
adverts.render();

只需卸下额外的支架。我将 JS Fiddle 更新为更像您的示例... [这里]

编辑：

我能够在我最新的 JSFiddle 中进行复制，我知道这听起来很疯狂，但是当我将第二个 div 的 ID 从 adverts 更改为 chartContainer2 时，它运行良好。

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

看这里

编辑2：

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

在此处输入图像描述

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

那么发生了什么..

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

在此处输入图像描述

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

解决方案

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

于 2015-09-18T01:59:07.897 回答