別のページに単一の円グラフをロードする方法

私は円グラフを読み込むためのHTMLページを使用します。そのhtmlページを別のhtmlページで複数回呼び出すことを試みました。別のページに単一の円グラフをロードする方法

piechart.js

function piechart() 
     { 

     var chart; 

      var legend; 

      var chartData = [{ 
       country: "Czech Republic", 
       litres: 20 
      }, { 
       country: "india", 
       litres: 60 
      }]; 

      AmCharts.ready(function() { 
       // PIE CHART 
       chart = new AmCharts.AmPieChart(); 
       chart.dataProvider = chartData; 
       chart.titleField = "country"; 
       chart.valueField = "litres"; 
       chart.outlineColor = "#FFFFFF"; 
       chart.outlineAlpha = 0.8; 
       chart.outlineThickness = 2; 

       // WRITE 
       chart.write("chartdiv"); 
      }); 

    };

piechart.htmlに記載の "chartdiv" にグラフをロードするための上記ジャバスクリプト。

<html> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>amCharts examples</title> 
     <link rel="stylesheet" href="widget1/style.css" type="text/css"> 
     <script src="widget1/js/amcharts.js" type="text/javascript"></script> 
     <script src="widget1/js/pie.js" type="text/javascript"></script> 
     <script src="widget/js/pagejs/aaaa.js" type="text/javascript"></script> 
     <script> 

     </script> 
    </head> 

    <body> 
    <div id="chart"> 
     <div id="chartdiv" style="width: 100%; height: 400px;"></div> 
     </div> 
    </body> 

</html>

piechart.htmlはその後、私はjqueryのを使用してdashboard.jspという名前の別のページに、このHTMLページを呼び出そうとしました。

dashboard.jsp

<script> 

    $(document).ready(function(){ 
    piechart(); 
    $("#pie").load("piechart.html"); 
    $("#column").load("piechart.html"); 
    alert("gghgn") 
     }); 

    </script> 

<div id="column"></div> 
<div id="pie"></div>

出典

2016-12-29 arsul huk

の両方でグラフを得ることを願っています

$(document).ready(function(){ $("#pie").load("piechart.html", function() { //success handler of ajax load var currentChartDivElem = $("#pie").find(".chartdiv").get(0); //Retrieve the DOM element piechart(currentChartDivElem); }); $("#column").load("piechart.html", function() { //success handler of ajax load var currentChartDivElem = $("#column").find(".chartdiv").get(0); //Retrieve the DOM element piechart(currentChartDivElem); }); });

を？ – vijayP

in document.ready function私は関数piechart（）を –

と呼んでいますので、現在どのような出力が得られていますか？ – vijayP

次のようにコードを変更してみてくださいでした：piechart.htmlで

1）変更：

<div class="chart"> 
    <div class="chartdiv" style="width: 100%; height: 400px;"></div> 
</div>

利用class代わりのididができるので、 1ページに重複しないでください。 piechart.js

function piechart(container) { 
    var chart; 
    var legend; 
    var chartData = [{ 
    country: "Czech Republic", 
    litres: 20 
    }, { 
    country: "india", 
    litres: 60 
    }]; 

    AmCharts.ready(function() { 
    // PIE CHART 
    chart = new AmCharts.AmPieChart(); 
    chart.dataProvider = chartData; 
    chart.titleField = "country"; 
    chart.valueField = "litres"; 
    chart.outlineColor = "#FFFFFF"; 
    chart.outlineAlpha = 0.8; 
    chart.outlineThickness = 2; 

    // WRITE 
    chart.write(container); 
    }); 

};

で

2）変更は、ここでは、円グラフが書き込まする必要がある上のコンテナに渡しています。

3）最後に変更dashboard.jsp：私は、これは動作するはずですし、あなたが ``関数円グラフ（）を呼び出しているところからのdiv

出典

2016-12-29 06:37:41 vijayP

申し訳ありません、それは機能していません。 –

ブラウザの検査を共有しています... morris.min.js：6不一致エラー：グラフコンテナの要素が見つかりません d [as constructor] （morris.min.js：6） –

あなたはあなたの 'console.log（currentChartDivElem）'を前にすることができますか？（morris.min.js：6） dc [as constructor]（morris.min.js：6）それを 'piechart'関数に渡す – vijayP

別のページに単一の円グラフをロードする方法

答えて

関連する問題