0

を使用して 2 つの動的グラフをレンダリングしようとしていますcanvasJS。グラフ 1 は適切にレンダリングされています。実際、2 番目のグラフは適切にinspect element表示されています。画像を参照してください。ページに表示されません。

これはインターフェイスです。1 つのグラフのみが表示されます ここに画像の説明を入力

これが要素の検査です。ここに画像の説明を入力

#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 でレプリケートすることができました。これはおかしいと思いますが、2 番目の 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 に答える