如何在不同页面上加载单个饼图

i use a html page for loading pie chart. then am tried to call that html page at multiple times on different html pages.

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

    };

the above java script for loading chart to "chartdiv" which described in piechart.html.

用于将图表加载到“chartdiv”的上述java脚本，如piechart.html中所述。

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>

then i tried to call this html page on another page named dashboard.jsp using jquery.

然后我尝试使用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>

1 个解决方案

#1

Could you please try modifying code as follows:

你可以尝试修改代码如下：

1) Changes in piechart.html:

1）piechart.html中的更改：

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

Use class instead of id because id can't be duplicated in single page.

使用class而不是id，因为id不能在单个页面中重复。

2) Changes in piechart.js

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

};

Here we are passing in the container on which pie chart need to written.

在这里，我们传递了需要编写饼图的容器。

3) finally modify dashboard.jsp:

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

});

I hope this should work and you will get charts in both the divs

我希望这应该有效，你会在两个div中得到图表

#1