餅圖和條形圖不能同時顯示

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

 
<script type="text/javascript"> 
 
\t \t window.onload = function() { 
 
\t \t \t var chart = new CanvasJS.Chart("chartContainer2", 
 
\t \t \t { 
 
\t \t \t \t title:{ 
 
\t \t \t \t \t text: "Bar chart" 
 
\t \t \t \t }, 
 

 
\t \t \t \t data: [ 
 
\t \t \t \t { 
 
\t \t \t \t \t type: "bar", 
 

 
\t \t \t \t \t dataPoints: [ 
 
\t \t \t \t \t { x: 10, y: 90, label:"Gulam" }, 
 
\t \t \t \t \t { x: 20, y: 70, label:"Husain" }, 
 
\t \t \t \t \t { x: 30, y: 50, label:"Shubhankar" }, 
 
\t \t \t \t \t { x: 40, y: 60, label:"Banana" }, 
 
\t \t \t \t \t { x: 50, y: 20, label:"Pineapple" }, 
 
\t \t \t \t \t { x: 60, y: 30, label:"Pears" }, 
 
\t \t \t \t \t { x: 70, y: 35, label:"Grapes" }, 
 
\t \t \t \t \t { x: 80, y: 40, label:"Lychee" }, 
 
\t \t \t \t \t { x: 90, y: 30, label:"Jackfruit" } 
 
\t \t \t \t \t ] 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }); 
 

 
\t \t \t chart.render(); 
 
\t \t } 
 
\t </script> 
 

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

 
</body> 
 
</html>

我已經把兩個編碼一個用於餅圖，另一個用於條形圖但是這兩個圖不能被同時顯示？爲什麼？代碼有沒有問題只有條形圖顯示餅圖不顯示。

來源

2017-02-15 Shubhankar Sengupta

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>

來源

2017-02-15 19:10:05 sjramsay

thanxx很多它的工作... –

其中一個window.onload函數覆蓋另一個函數。

而在一審，window.onload ={應該是這個window.onload = function() {。

這將然而，更好地正確地組織你的網頁，包括在頁面底部的腳本。這意味着您可以在onload檢查乾脆做掉：

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

來源

2017-02-15 19:17:05

thanxx它解決了我的問題 –

不客氣。請提供您認爲有幫助的答案。 –

餅圖和條形圖不能同時顯示

回答

相關問題