Question

我使用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脚本，用于将图表加载到＆＃34; chartdiv＆＃34;在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>

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

Answer 1

您可以尝试按如下方式修改代码：

1）piechart.html中的更改：

<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中获得图表

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

1 个答案: