stackoom
  简体   繁体   中英

pie chart and bar graph cannot be displayed simultaneously

 原文  2017-02-15 18:52:58  5   2    javascript/ html/ angular-ui-bootstrap

Question

 <html> <head> </head> <body> <script type="text/javascript" src="assets/js/canvasjs.min1.js"></script> <script type="text/javascript"> window.onload ={ var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, legend: { verticalAlign: "bottom", horizontalAlign: "center" }, theme: "theme1", data: [ { type: "pie", indexLabelFontFamily: "Garamond", indexLabelFontSize: 20, indexLabelFontWeight: "bold", startAngle:0, indexLabelFontColor: "MistyRose", indexLabelLineColor: "darkgrey", indexLabelPlacement: "inside", toolTipContent: "{name}: {y}hrs", showInLegend: true, indexLabel: "#percent%", dataPoints: [ { y: 52, name: "Time At Work", legendMarkerType: "triangle"}, { y: 44, name: "Time At Home", legendMarkerType: "square"}, { y: 12, name: "Time Spent Out", legendMarkerType: "circle"} ] } ] }); chart.render(); } </script> <script type="text/javascript"> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer2", { title:{ text: "Bar chart" }, data: [ { type: "bar", dataPoints: [ { x: 10, y: 90, label:"Gulam" }, { x: 20, y: 70, label:"Husain" }, { x: 30, y: 50, label:"Shubhankar" }, { x: 40, y: 60, label:"Banana" }, { x: 50, y: 20, label:"Pineapple" }, { x: 60, y: 30, label:"Pears" }, { x: 70, y: 35, label:"Grapes" }, { x: 80, y: 40, label:"Lychee" }, { x: 90, y: 30, label:"Jackfruit" } ] } ] }); chart.render(); } </script> <!-- panel body --> <div class="panel-body"> <div id="chartContainer" style="height:400px; width: 100%;"></div> </div> <!-- panel body --> <div class="panel-body"> <div id="chartContainer2" style="height: 400px; width: 100%;"></div> </div> </body> </html>

i have put two codes one for pie chart and another for bar graph but those two graphs cannot be displayed simultaneously? why? is there any problem with the code only bar graph is displaying pie chart is not displaying.

2 answers

solution1
 0  2017-02-15 19:10:05

First add function() after the window.onload = code
Then you don't want two window.onload events, so I combined your two onload scripts to be one as show below.  

   <html>
<head>
</head>
<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>

    <script type="text/javascript">
     window.onload = function(){

    var chart = new CanvasJS.Chart("chartContainer",
    {
                animationEnabled: true,
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center"
        },
        theme: "theme1",
        data: [
        {        
            type: "pie",
            indexLabelFontFamily: "Garamond",       
            indexLabelFontSize: 20,
            indexLabelFontWeight: "bold",
            startAngle:0,
            indexLabelFontColor: "MistyRose",       
            indexLabelLineColor: "darkgrey", 
            indexLabelPlacement: "inside", 
            toolTipContent: "{name}: {y}hrs",
            showInLegend: true,
            indexLabel: "#percent%", 
            dataPoints: [
                {  y: 52, name: "Time At Work", legendMarkerType: "triangle"},
                {  y: 44, name: "Time At Home", legendMarkerType: "square"},
                {  y: 12, name: "Time Spent Out", legendMarkerType: "circle"}
            ]
        }
        ]
    });
    chart.render();

    chart = new CanvasJS.Chart("chartContainer2",
            {
                title:{
                    text: "Bar chart"
            },
                data: [
                {
                    type: "bar",
                    dataPoints: [
                    { x: 10, y: 90, label:"Gulam" },
                    { x: 20, y: 70, label:"Husain" },
                    { x: 30, y: 50, label:"Shubhankar" },
                    { x: 40, y: 60, label:"Banana" },
                    { x: 50, y: 20, label:"Pineapple" },
                    { x: 60, y: 30, label:"Pears" },
                    { x: 70, y: 35, label:"Grapes" },
                    { x: 80, y: 40, label:"Lychee" },
                    { x: 90, y: 30, label:"Jackfruit" }
                    ]
                }
                ]
            });
            chart.render();
   }
</script>

                    <!-- panel body -->
                    <div class="panel-body">
                        <div id="chartContainer" style="height:400px; width: 100%;"></div>

                    </div>

                    <!-- panel body -->
                    <div class="panel-body">
                        <div id="chartContainer2" style="height: 400px; width: 100%;"></div>
                    </div>                      

</body>
</html>

solution2
 0  2017-02-15 19:17:05

One window.onload function is overwriting the other.

And in the first instance, window.onload ={ should be this window.onload = function() { .

It would however, be better to structure your page correctly and include the scripts at the bottom of the page. This means you can do away with the onload check altogether: 

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Graphs and ting</title>
  </head>
  <body>
    <!-- panel body -->
    <div class="panel-body">
      <div id="chartContainer" style="height:400px; width: 100%;"></div>
    </div>

    <!-- panel body -->
    <div class="panel-body">
      <div id="chartContainer2" style="height: 400px; width: 100%;"></div>
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
    <script type="text/javascript">
      var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        legend: {
          verticalAlign: "bottom",
          horizontalAlign: "center"
        },
        theme: "theme1",
        data: [{
          type: "pie",
          indexLabelFontFamily: "Garamond",
          indexLabelFontSize: 20,
          indexLabelFontWeight: "bold",
          startAngle:0,
          indexLabelFontColor: "MistyRose",
          indexLabelLineColor: "darkgrey",
          indexLabelPlacement: "inside",
          toolTipContent: "{name}: {y}hrs",
          showInLegend: true,
          indexLabel: "#percent%",
          dataPoints: [
            {  y: 52, name: "Time At Work", legendMarkerType: "triangle"},
            {  y: 44, name: "Time At Home", legendMarkerType: "square"},
            {  y: 12, name: "Time Spent Out", legendMarkerType: "circle"}
          ]
        }]
      });
      chart.render();

      var chart = new CanvasJS.Chart("chartContainer2", {
        title:{
          text: "Bar chart"
        },
        data: [{
          type: "bar",

          dataPoints: [
            { x: 10, y: 90, label:"Gulam" },
            { x: 20, y: 70, label:"Husain" },
            { x: 30, y: 50, label:"Shubhankar" },
            { x: 40, y: 60, label:"Banana" },
            { x: 50, y: 20, label:"Pineapple" },
            { x: 60, y: 30, label:"Pears" },
            { x: 70, y: 35, label:"Grapes" },
            { x: 80, y: 40, label:"Lychee" },
            { x: 90, y: 30, label:"Jackfruit" }
          ]
        }]
      });
      chart.render();
    </script>
  </body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Highcharts - Add bar graph to a pie chart ApexChart Pie/Donut Chart not displayed Create multiple pie chart simultaneously using chart.js Cannot initialize a pie chart with Chart.js Graph/chart that supports dynamic pie charts? Adding a Label to Chart js Pie Graph why my pie chart using google chart is not displayed on blade? Switch between pie charts and bar chart in highcharts My Jqplot pie chart is being displayed without any color for the small table inside the pie chart Pie chart on tooltip hover on multi bar chart nvd3
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM