如何在不同的頁面上加載單個餅圖

我使用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"); 
      }); 

    };

上述Java腳本用於加載圖表，其在piechart.html描述的「chartdiv」。

piechart.html

<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>

那我就打電話叫dashboard.jsp使用jQuery另一頁上這個網站的頁面。

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

？ – vijayP

在document.ready函數中，我調用了函數piechart（） –

那麼你現在得到了什麼輸出？ – vijayP

可否請您嘗試修改代碼如下：piechart.html

1）的變化：

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

使用class，而不是id因爲id能不會在單個頁面中複製。

2）變化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); 
    }); 

};

這裏我們傳遞上餅圖需要寫的容器。

3）最後修改dashboard.jsp：

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

});

我希望這應該工作，你會從你在哪裏調用`函數餅圖（）`獲取圖表中都div的

來源

2016-12-29 06:37:41 vijayP

對不起，先生，其不工作.. –

我共享瀏覽器的檢查... morris.min.js：6未捕獲的錯誤：未找到圖形容器元素 at d [as constructor] （morris.min.js：6） at dc [as constructor]（morris.min.js：6） at new d（morris.min.js：6） –

can''console.log（currentChartDivElem）'before將它傳遞給'piechart'函數 – vijayP

如何在不同的頁面上加載單個餅圖

回答

相關問題