饼图和条形图无法同时显示

时间：2017-02-15 18:52:58

标签： javascript html angular-ui-bootstrap 

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

我已经为饼图设置了两个代码而另一个用于条形图但是这两个图表不能同时显示？为什么？是否有任何问题只有条形图显示饼图没有显示。

2 个答案:

答案 0 :(得分：0)

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>

答案 1 :(得分：0)

一个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>
相关问题
最新问题